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

new styles after user feedback

Browse Source
This commit is contained in:
dragonwocky 2020-05-31 00:06:56 +10:00
parent 78c02e7dee
commit ad040d83eb
Signed by: dragonwocky
GPG Key ID: C7A48B7846AA706D
10 changed files with 227 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
CHANGELOG.md
View File

@ -3,6 +3,13 @@
if something is ~~crossed out~~, then it is no longer a feature included by default, 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). 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) ### v0.5.0 (2020-05-23)
- new: running from the wsl. - new: running from the wsl.

92
README.md
View File

@ -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 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)). (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 #### wider page view
```css ```css
@ -233,8 +323,6 @@ as it is a per-table-column style, unlike all others here, it must be prepended
## other details ## 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](https://www.notion.so/Media-Kit-205535b1d9c4440497a3d7a2ac096286). [media kit](https://www.notion.so/Media-Kit-205535b1d9c4440497a3d7a2ac096286).

2
cleaner.py
View File

@ -1,5 +1,5 @@
# Notion Enhancer # notion-enhancer
# (c) 2020 dragonwocky <thedragonring.bod@gmail.com> # (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
# (c) 2020 TarasokUA # (c) 2020 TarasokUA
# (https://dragonwocky.me/) under the MIT license # (https://dragonwocky.me/) under the MIT license

2
customiser.py
View File

@ -1,5 +1,5 @@
# Notion Enhancer # notion-enhancer
# (c) 2020 dragonwocky <thedragonring.bod@gmail.com> # (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
# (c) 2020 TarasokUA # (c) 2020 TarasokUA
# (https://dragonwocky.me/) under the MIT license # (https://dragonwocky.me/) under the MIT license

14
docs/changelog.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html><!-- Documentative--><!-- (c) 2020 dragonwocky <thedragonring.bod@gmail.com>--><!-- (https://dragonwocky.me/) under the MIT license--><html prefix="og: http://ogp.me/ns#"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>changelog | notion enhancer</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Nunito+Sans"><link rel="stylesheet" href="docs.css"><script src="docs.js"></script><link rel="icon" href="web-logo.png" media="(prefers-color-scheme: dark)"><link rel="icon" href="web-logo.png"><meta name="title" content="changelog | notion enhancer"><meta name="description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta name="theme-color" content="rgb(75, 133, 209)"><meta property="og:type" content="article"><meta property="og:url" content="https://dragonwocky.me/notion-enhancer/changelog.html"><meta property="og:title" content="changelog"><meta property="og:site_name" content="notion enhancer"><meta property="og:description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta property="og:image" content="https://dragonwocky.me/notion-enhancer/web-logo.png"><meta property="twitter:card" content="summary"></head><body><aside class="menu"><div><div class="title"><h1>notion enhancer</h1><picture class="icon"><source srcset="web-logo.png" media="(prefers-color-scheme: dark)"><img src="web-logo.png"></picture></div></div><ul class="nav"><li class="entry"><a href="index.html">notion enhancer</a></li><li class="entry"><p>resources</p></li><li class="entry"><a href="#changelog">changelog</a><ul><li class="level-3"><a href="#v050-2020-05-23">v0.5.0 (2020-05-23)</a></li><li class="level-3"><a href="#v041-2020-02-13">v0.4.1 (2020-02-13)</a></li><li class="level-3"><a href="#v040">v0.4.0</a></li><li class="level-3"><a href="#v030">v0.3.0</a></li><li class="level-3"><a href="#v020">v0.2.0</a></li><li class="level-3"><a href="#v010">v0.1.0</a></li></ul></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/blob/master/LICENSE">license</a></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/">github</a></li><li class="entry"><a href="https://dragonwocky.me/">me (dragonwocky)</a></li></ul><p class="mark"><a href="https://dragonwocky.me/documentative">docs by documentative</a></p></aside><div class="wrapper"><div class="toggle"><button>☰</button><h1>notion enhancer</h1></div><article class="documentative"><div class="content"> <!DOCTYPE html><!-- Documentative--><!-- (c) 2020 dragonwocky <thedragonring.bod@gmail.com>--><!-- (https://dragonwocky.me/) under the MIT license--><html prefix="og: http://ogp.me/ns#"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>changelog | notion enhancer</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Nunito+Sans"><link rel="stylesheet" href="docs.css"><script src="docs.js"></script><link rel="icon" href="web-logo.png" media="(prefers-color-scheme: dark)"><link rel="icon" href="web-logo.png"><meta name="title" content="changelog | notion enhancer"><meta name="description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta name="theme-color" content="rgb(75, 133, 209)"><meta property="og:type" content="article"><meta property="og:url" content="https://dragonwocky.me/notion-enhancer/changelog.html"><meta property="og:title" content="changelog"><meta property="og:site_name" content="notion enhancer"><meta property="og:description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta property="og:image" content="https://dragonwocky.me/notion-enhancer/web-logo.png"><meta property="twitter:card" content="summary"></head><body><aside class="menu"><div><div class="title"><h1>notion enhancer</h1><picture class="icon"><source srcset="web-logo.png" media="(prefers-color-scheme: dark)"><img src="web-logo.png"></picture></div></div><ul class="nav"><li class="entry"><a href="index.html">notion enhancer</a></li><li class="entry"><p>resources</p></li><li class="entry"><a href="#changelog">changelog</a><ul><li class="level-3"><a href="#v051-wip">v0.5.1 (wip)</a></li><li class="level-3"><a href="#v050-2020-05-23">v0.5.0 (2020-05-23)</a></li><li class="level-3"><a href="#v041-2020-02-13">v0.4.1 (2020-02-13)</a></li><li class="level-3"><a href="#v040">v0.4.0</a></li><li class="level-3"><a href="#v030">v0.3.0</a></li><li class="level-3"><a href="#v020">v0.2.0</a></li><li class="level-3"><a href="#v010">v0.1.0</a></li></ul></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/blob/master/LICENSE">license</a></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/">github</a></li><li class="entry"><a href="https://dragonwocky.me/">me (dragonwocky)</a></li></ul><p class="mark"><a href="https://dragonwocky.me/documentative">docs by documentative</a></p></aside><div class="wrapper"><div class="toggle"><button>☰</button><h1>notion enhancer</h1></div><article class="documentative"><div class="content">
<section class="block" id="changelog"> <section class="block" id="changelog">
<h1> <h1>
@ -7,6 +7,18 @@
<p>if something is <del>crossed out</del>, then it is no longer a feature included by default, <p>if something is <del>crossed out</del>, then it is no longer a feature included by default,
but can still easily be enabled by following instructions in the <a href="/index.html">docs</a>.</p> but can still easily be enabled by following instructions in the <a href="/index.html">docs</a>.</p>
</section>
<section class="block" id="v051-wip">
<h3>
<a href="#v051-wip">v0.5.1 (wip)</a>
</h3>
<ul>
<li>new: hide discussions (thanks to <a href="https://www.reddit.com/user/Roosmaryn/">u/Roosmaryn</a>)</li>
<li>new: custom colour theming, demonstrated via the dark+ theme.</li>
<li>new: custom fonts.</li>
<li>new: font resizing.</li>
</ul>
</section> </section>
<section class="block" id="v050-2020-05-23"> <section class="block" id="v050-2020-05-23">
<h3> <h3>

97
docs/index.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html><!-- Documentative--><!-- (c) 2020 dragonwocky <thedragonring.bod@gmail.com>--><!-- (https://dragonwocky.me/) under the MIT license--><html prefix="og: http://ogp.me/ns#"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>notion enhancer</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Nunito+Sans"><link rel="stylesheet" href="docs.css"><script src="docs.js"></script><link rel="icon" href="web-logo.png" media="(prefers-color-scheme: dark)"><link rel="icon" href="web-logo.png"><meta name="title" content="notion enhancer"><meta name="description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta name="theme-color" content="rgb(75, 133, 209)"><meta property="og:type" content="article"><meta property="og:url" content="https://dragonwocky.me/notion-enhancer/index.html"><meta property="og:title" content="notion enhancer"><meta property="og:site_name" content="notion enhancer"><meta property="og:description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta property="og:image" content="https://dragonwocky.me/notion-enhancer/web-logo.png"><meta property="twitter:card" content="summary"></head><body><aside class="menu"><div><div class="title"><h1>notion enhancer</h1><picture class="icon"><source srcset="web-logo.png" media="(prefers-color-scheme: dark)"><img src="web-logo.png"></picture></div></div><ul class="nav"><li class="entry"><a href="#notion-enhancer">notion enhancer</a><ul><li class="level-2"><a href="#installation">installation</a></li><li class="level-2"><a href="#this-is-a-fork">this is a fork</a></li><li class="level-2"><a href="#features">features</a></li><li class="level-3"><a href="#titlebar">titlebar</a></li><li class="level-3"><a href="#nicer-scrollbars">nicer scrollbars</a></li><li class="level-3"><a href="#hotkeys">hotkeys</a></li><li class="level-3"><a href="#tray">tray</a></li><li class="level-3"><a href="#styling">styling</a></li><li class="level-4"><a href="#wider-page-view">wider page view</a></li><li class="level-4"><a href="#thinner-cover-image">thinner cover image</a></li><li class="level-4"><a href="#table-columns-below-100px">table columns below 100px</a></li><li class="level-4"><a href="#hide--new-table-row">hide '+ new' table row</a></li><li class="level-4"><a href="#hide-calculations-table-row">hide calculations table row</a></li><li class="level-4"><a href="#hide--new-board-row">hide '+ new' board row</a></li><li class="level-4"><a href="#hide-board-view-hidden-columns">hide board view hidden columns</a></li><li class="level-4"><a href="#hide-board-view-add-a-group">hide board view 'add a group'</a></li><li class="level-4"><a href="#centre-align-table-column-headers">centre-align table column headers</a></li><li class="level-4"><a href="#smaller-table-column-header-icons">smaller table column header icons</a></li><li class="level-4"><a href="#remove-icons-from-table-column-headers">remove icons from table column headers</a></li><li class="level-4"><a href="#removingdecreasing-side-padding-for-tables">removing/decreasing side padding for tables</a></li><li class="level-4"><a href="#removingdecreasing-side-padding-for-boards">removing/decreasing side padding for boards</a></li><li class="level-2"><a href="#other-details">other details</a></li></ul></li><li class="entry"><p>resources</p></li><li class="entry"><a href="changelog.html">changelog</a></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/blob/master/LICENSE">license</a></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/">github</a></li><li class="entry"><a href="https://dragonwocky.me/">me (dragonwocky)</a></li></ul><p class="mark"><a href="https://dragonwocky.me/documentative">docs by documentative</a></p></aside><div class="wrapper"><div class="toggle"><button>☰</button><h1>notion enhancer</h1></div><article class="documentative"><div class="content"> <!DOCTYPE html><!-- Documentative--><!-- (c) 2020 dragonwocky <thedragonring.bod@gmail.com>--><!-- (https://dragonwocky.me/) under the MIT license--><html prefix="og: http://ogp.me/ns#"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>notion enhancer</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Nunito+Sans"><link rel="stylesheet" href="docs.css"><script src="docs.js"></script><link rel="icon" href="web-logo.png" media="(prefers-color-scheme: dark)"><link rel="icon" href="web-logo.png"><meta name="title" content="notion enhancer"><meta name="description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta name="theme-color" content="rgb(75, 133, 209)"><meta property="og:type" content="article"><meta property="og:url" content="https://dragonwocky.me/notion-enhancer/index.html"><meta property="og:title" content="notion enhancer"><meta property="og:site_name" content="notion enhancer"><meta property="og:description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta property="og:image" content="https://dragonwocky.me/notion-enhancer/web-logo.png"><meta property="twitter:card" content="summary"></head><body><aside class="menu"><div><div class="title"><h1>notion enhancer</h1><picture class="icon"><source srcset="web-logo.png" media="(prefers-color-scheme: dark)"><img src="web-logo.png"></picture></div></div><ul class="nav"><li class="entry"><a href="#notion-enhancer">notion enhancer</a><ul><li class="level-2"><a href="#installation">installation</a></li><li class="level-2"><a href="#this-is-a-fork">this is a fork</a></li><li class="level-2"><a href="#features">features</a></li><li class="level-3"><a href="#titlebar">titlebar</a></li><li class="level-3"><a href="#nicer-scrollbars">nicer scrollbars</a></li><li class="level-3"><a href="#hotkeys">hotkeys</a></li><li class="level-3"><a href="#tray">tray</a></li><li class="level-3"><a href="#styling">styling</a></li><li class="level-4"><a href="#dark-theme">dark+ theme</a></li><li class="level-4"><a href="#hide-discussions-comment-threads-at-the-top-of-each-page">hide discussions (comment threads at the top of each page)</a></li><li class="level-4"><a href="#custom-fonts">custom fonts</a></li><li class="level-3"><a href="#font-resizing">font resizing</a></li><li class="level-4"><a href="#wider-page-view">wider page view</a></li><li class="level-4"><a href="#thinner-cover-image">thinner cover image</a></li><li class="level-4"><a href="#table-columns-below-100px">table columns below 100px</a></li><li class="level-4"><a href="#hide--new-table-row">hide '+ new' table row</a></li><li class="level-4"><a href="#hide-calculations-table-row">hide calculations table row</a></li><li class="level-4"><a href="#hide--new-board-row">hide '+ new' board row</a></li><li class="level-4"><a href="#hide-board-view-hidden-columns">hide board view hidden columns</a></li><li class="level-4"><a href="#hide-board-view-add-a-group">hide board view 'add a group'</a></li><li class="level-4"><a href="#centre-align-table-column-headers">centre-align table column headers</a></li><li class="level-4"><a href="#smaller-table-column-header-icons">smaller table column header icons</a></li><li class="level-4"><a href="#remove-icons-from-table-column-headers">remove icons from table column headers</a></li><li class="level-4"><a href="#removingdecreasing-side-padding-for-tables">removing/decreasing side padding for tables</a></li><li class="level-4"><a href="#removingdecreasing-side-padding-for-boards">removing/decreasing side padding for boards</a></li><li class="level-2"><a href="#other-details">other details</a></li></ul></li><li class="entry"><p>resources</p></li><li class="entry"><a href="changelog.html">changelog</a></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/blob/master/LICENSE">license</a></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/">github</a></li><li class="entry"><a href="https://dragonwocky.me/">me (dragonwocky)</a></li></ul><p class="mark"><a href="https://dragonwocky.me/documentative">docs by documentative</a></p></aside><div class="wrapper"><div class="toggle"><button>☰</button><h1>notion enhancer</h1></div><article class="documentative"><div class="content">
<section class="block" id="notion-enhancer"> <section class="block" id="notion-enhancer">
<h1> <h1>
@ -113,6 +113,98 @@ changes will be applied instantly on notion reload
<p>css below will work for every instance of the element, but if you wish to hide only a specific element <p>css below will work for every instance of the element, but if you wish to hide only a specific element
(e.g. the &#39;+ new&#39; table row) it is recommended that you prepend each selector with <code>[data-block-id=&#39;ID&#39;]</code> (<a href="https://www.youtube.com/watch?v=6V7eqShm_4w">video tutorial on fetching IDs</a>).</p> (e.g. the &#39;+ new&#39; table row) it is recommended that you prepend each selector with <code>[data-block-id=&#39;ID&#39;]</code> (<a href="https://www.youtube.com/watch?v=6V7eqShm_4w">video tutorial on fetching IDs</a>).</p>
</section>
<section class="block" id="dark-theme">
<h4>
<a href="#dark-theme">dark+ theme</a>
</h4>
<pre><code class="lang-css"><span class="hljs-comment">/*** dark+ ***/</span>
<span class="hljs-selector-class">.notion-dark-theme</span> <span class="hljs-selector-class">.window-buttons</span> {
<span class="hljs-attribute">background</span>: <span class="hljs-built_in">rgb</span>(<span class="hljs-number">10</span>, <span class="hljs-number">10</span>, <span class="hljs-number">10</span>);
}
<span class="hljs-selector-class">.notion-dark-theme</span> <span class="hljs-selector-class">.window-buttons</span><span class="hljs-selector-pseudo">:hover</span> {
<span class="hljs-attribute">background</span>: <span class="hljs-built_in">rgb</span>(<span class="hljs-number">23</span>, <span class="hljs-number">23</span>, <span class="hljs-number">23</span>);
}
<span class="hljs-comment">/* sidebar */</span>
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'background: rgb(55, 60, 63)'</span>]</span>,
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'background: rgb(80, 85, 88)'</span>]</span> {
<span class="hljs-attribute">background</span>: <span class="hljs-built_in">rgb</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>) <span class="hljs-meta">!important</span>;
}
<span class="hljs-comment">/* main content */</span>
<span class="hljs-selector-class">.notion-body</span><span class="hljs-selector-class">.dark</span>,
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'background: rgb(47, 52, 55)'</span>]</span> {
<span class="hljs-attribute">background</span>: <span class="hljs-built_in">rgb</span>(<span class="hljs-number">10</span>, <span class="hljs-number">10</span>, <span class="hljs-number">10</span>) <span class="hljs-meta">!important</span>;
}
<span class="hljs-comment">/* hovered buttons */</span>
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'background: rgb(71, 76, 80)'</span>]</span>,
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'background: rgb(98, 102, 104)'</span>]</span> {
<span class="hljs-attribute">background</span>: <span class="hljs-built_in">rgb</span>(<span class="hljs-number">15</span>, <span class="hljs-number">15</span>, <span class="hljs-number">15</span>) <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">0.5px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">78</span>, <span class="hljs-number">78</span>, <span class="hljs-number">78</span>, <span class="hljs-number">0.7</span>);
}
<span class="hljs-comment">/* database elements: e.g. view select, calendar event */</span>
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'background: rgb(63, 68, 71)'</span>]</span> {
<span class="hljs-attribute">background</span>: <span class="hljs-built_in">rgb</span>(<span class="hljs-number">4</span>, <span class="hljs-number">4</span>, <span class="hljs-number">4</span>) <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">border</span>: <span class="hljs-number">0.5px</span> solid <span class="hljs-built_in">rgba</span>(<span class="hljs-number">59</span>, <span class="hljs-number">59</span>, <span class="hljs-number">59</span>, <span class="hljs-number">0.7</span>);
}</code></pre>
</section>
<section class="block" id="hide-discussions-comment-threads-at-the-top-of-each-page">
<h4>
<a href="#hide-discussions-comment-threads-at-the-top-of-each-page">hide discussions (comment threads at the top of each page)</a>
</h4>
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-page-view-discussion</span> {
<span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>;
}</code></pre>
</section>
<section class="block" id="custom-fonts">
<h4>
<a href="#custom-fonts">custom fonts</a>
</h4>
<p><strong>styles must be added to the top of the <code>user.css</code> file, so that nothing (other than comments) is above them @import statement</strong></p>
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-app-inner</span> {
<span class="hljs-attribute">font-family</span>: <span class="hljs-string">'Oxygen'</span>, sans-serif <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'monospace;'</span>]</span> {
<span class="hljs-attribute">font-family</span>: <span class="hljs-string">'Fira Code'</span>, monospace <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-attr">[style*=<span class="hljs-string">', serif;'</span>]</span> {
<span class="hljs-attribute">font-family</span>: <span class="hljs-string">'Roboto Slab'</span>, serif <span class="hljs-meta">!important</span>;
}</code></pre>
</section>
<section class="block" id="font-resizing">
<h3>
<a href="#font-resizing">font resizing</a>
</h3>
<p><strong>not recommended:</strong> this can mess up container sizes.
it is suggested to instead use <code>ctrl+</code> or <code>ctrl-</code> to scale everything up/down.</p>
<pre><code class="lang-css"><span class="hljs-comment">/* font sizes */</span>
<span class="hljs-selector-pseudo">:root</span> {
<span class="hljs-attribute">--font-scale</span>: <span class="hljs-number">1</span>;
}
<span class="hljs-selector-class">.notion-app-inner</span> {
<span class="hljs-attribute">font-size</span>: <span class="hljs-built_in">calc</span>(var(--font-scale) * <span class="hljs-number">16px</span>) <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'font-size: 40px'</span>]</span> {
<span class="hljs-attribute">font-size</span>: <span class="hljs-built_in">calc</span>(var(--font-scale) * <span class="hljs-number">40px</span>) <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'font-size: 16px'</span>]</span> {
<span class="hljs-attribute">font-size</span>: <span class="hljs-built_in">calc</span>(var(--font-scale) * <span class="hljs-number">16px</span>) <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'font-size: 14px'</span>]</span> {
<span class="hljs-attribute">font-size</span>: <span class="hljs-built_in">calc</span>(var(--font-scale) * <span class="hljs-number">14px</span>) <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'font-size: 12px'</span>]</span> {
<span class="hljs-attribute">font-size</span>: <span class="hljs-built_in">calc</span>(var(--font-scale) * <span class="hljs-number">12px</span>) <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'font-size: 11px'</span>]</span> {
<span class="hljs-attribute">font-size</span>: <span class="hljs-built_in">calc</span>(var(--font-scale) * <span class="hljs-number">11px</span>) <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'font-size: 1.25em'</span>]</span> {
<span class="hljs-attribute">font-size</span>: <span class="hljs-built_in">calc</span>(var(--font-scale) * <span class="hljs-number">1.25em</span>) <span class="hljs-meta">!important</span>;
}</code></pre>
</section> </section>
<section class="block" id="wider-page-view"> <section class="block" id="wider-page-view">
<h4> <h4>
@ -273,8 +365,7 @@ as it is a per-table-column style, unlike all others here, it must be prepended
<h2> <h2>
<a href="#other-details">other details</a> <a href="#other-details">other details</a>
</h2> </h2>
<p>i have an unhealthy habit of avoiding capital letters. nothing enforces this, i just do it.</p> <p>the notion logo belongs entirely to the notion team, and was sourced from their
<p>the notion logo belongs entirely to the notion team, and was sourced from their
<a href="https://www.notion.so/Media-Kit-205535b1d9c4440497a3d7a2ac096286">media kit</a>.</p> <a href="https://www.notion.so/Media-Kit-205535b1d9c4440497a3d7a2ac096286">media kit</a>.</p>
<p>if you have any questions, check <a href="https://dragonwocky.me/">my website</a> for contact details.</p> <p>if you have any questions, check <a href="https://dragonwocky.me/">my website</a> for contact details.</p>

30
resources/hotkey.js
View File

@ -1,7 +1,7 @@
/* === INJECTION MARKER === */ /* === INJECTION MARKER === */
/* /*
* Notion Enhancer * notion-enhancer
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> * (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
* (c) 2020 TarasokUA * (c) 2020 TarasokUA
* (https://dragonwocky.me/) under the MIT license * (https://dragonwocky.me/) under the MIT license
@ -22,14 +22,14 @@ function enhancements() {
defaults: { defaults: {
openhidden: false, openhidden: false,
maximised: false, maximised: false,
tray: false tray: false,
} },
}), }),
states = { states = {
startup: electron_1.app.getLoginItemSettings().openAtLogin, startup: electron_1.app.getLoginItemSettings().openAtLogin,
openhidden: store.get('openhidden'), openhidden: store.get('openhidden'),
maximised: store.get('maximised'), maximised: store.get('maximised'),
tray: store.get('tray') tray: store.get('tray'),
}; };
tray = new Tray(path.join(__dirname, './notion.ico')); tray = new Tray(path.join(__dirname, './notion.ico'));
@ -42,7 +42,7 @@ function enhancements() {
click: () => click: () =>
contextMenu.getMenuItemById('startup').checked contextMenu.getMenuItemById('startup').checked
? electron_1.app.setLoginItemSettings({ openAtLogin: true }) ? electron_1.app.setLoginItemSettings({ openAtLogin: true })
: electron_1.app.setLoginItemSettings({ openAtLogin: false }) : electron_1.app.setLoginItemSettings({ openAtLogin: false }),
}, },
{ {
id: 'openhidden', id: 'openhidden',
@ -52,7 +52,7 @@ function enhancements() {
click: () => click: () =>
contextMenu.getMenuItemById('openhidden').checked contextMenu.getMenuItemById('openhidden').checked
? store.set('openhidden', true) ? store.set('openhidden', true)
: store.set('openhidden', false) : store.set('openhidden', false),
}, },
{ {
id: 'maximised', id: 'maximised',
@ -62,7 +62,7 @@ function enhancements() {
click: () => click: () =>
contextMenu.getMenuItemById('maximised').checked contextMenu.getMenuItemById('maximised').checked
? store.set('maximised', true) ? store.set('maximised', true)
: store.set('maximised', false) : store.set('maximised', false),
}, },
{ {
id: 'tray', id: 'tray',
@ -72,15 +72,15 @@ function enhancements() {
click: () => click: () =>
contextMenu.getMenuItemById('tray').checked contextMenu.getMenuItemById('tray').checked
? store.set('tray', true) ? store.set('tray', true)
: store.set('tray', false) : store.set('tray', false),
}, },
{ {
type: 'separator' type: 'separator',
}, },
{ {
label: '(x) quit', label: '(x) quit',
role: 'quit' role: 'quit',
} },
]); ]);
tray.setContextMenu(contextMenu); tray.setContextMenu(contextMenu);
@ -100,10 +100,10 @@ function enhancements() {
const hotkey = '___hotkey___'; // will be set by python script const hotkey = '___hotkey___'; // will be set by python script
electron_1.globalShortcut.register(hotkey, () => { electron_1.globalShortcut.register(hotkey, () => {
const windows = electron_1.BrowserWindow.getAllWindows(); const windows = electron_1.BrowserWindow.getAllWindows();
if (windows.some(win => !win.isVisible())) { if (windows.some((win) => !win.isVisible())) {
if (contextMenu.getMenuItemById('maximised').checked) { if (contextMenu.getMenuItemById('maximised').checked) {
windows.forEach(win => win.maximize()); windows.forEach((win) => win.maximize());
} else windows.forEach(win => win.show()); } else windows.forEach((win) => win.show());
} else windows.forEach(win => win.hide()); } else windows.forEach((win) => win.hide());
}); });
} }

8
resources/preload.js
View File

@ -1,7 +1,7 @@
/* === INJECTION MARKER === */ /* === INJECTION MARKER === */
/* /*
* Notion Enhancer * notion-enhancer
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> * (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
* (c) 2020 TarasokUA * (c) 2020 TarasokUA
* (https://dragonwocky.me/) under the MIT license * (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')))({ const store = new (require(path.join(__dirname, '..', 'store.js')))({
config: 'user-preferences', config: 'user-preferences',
defaults: { defaults: {
tray: false tray: false,
} },
}); });
if ( if (
store.get('tray') && store.get('tray') &&
@ -87,7 +87,7 @@ require('electron').remote.getGlobal('setTimeout')(() => {
/* reload window */ /* reload window */
document.defaultView.addEventListener( document.defaultView.addEventListener(
'keyup', 'keyup',
ev => void (ev.code === 'F5' ? appwindow.reload() : 0), (ev) => void (ev.code === 'F5' ? appwindow.reload() : 0),
true true
); );
} }

2
resources/store.js
View File

@ -1,5 +1,5 @@
/* /*
* Notion Enhancer * notion-enhancer
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> * (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
* (c) 2020 TarasokUA * (c) 2020 TarasokUA
* (https://dragonwocky.me/) under the MIT license * (https://dragonwocky.me/) under the MIT license

2
resources/user.css
View File

@ -1,5 +1,5 @@
/* /*
* Notion Enhancer * notion-enhancer
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> * (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
* (c) 2020 TarasokUA * (c) 2020 TarasokUA
* (https://dragonwocky.me/) under the MIT license * (https://dragonwocky.me/) under the MIT license