notion enhancer
@@ -8,16 +8,17 @@ but can still easily be enabled by following instructions in the docs.
- v0.5.1 (wip) + v0.6.0 (wip)
-
-
- docs: custom colour theming, demonstrated via the dark+ theme.
- docs: custom fonts.
- docs: font resizing.
- docs: hide discussions (thanks to u/Roosmaryn) -
- bugfix: specify UTF-8 encoding to prevent gbk codec errors (thanks to @etnperlong) +
- new: custom colour theming, demonstrated via the dark+ theme. +
- improved: if hotkey is pressed while notion is unfocused, it will bring it to the front rather than hiding it. +
- bugfix: specify UTF-8 encoding to prevent multibyte/gbk codec errors (thanks to @etnperlong)
Edit on GitHub // © 2020 dragonwocky & Uzver, under the MIT license.
-notion enhancer
notion enhancer
@@ -12,7 +12,6 @@ installation
currently, only win10 is supported. it is possible to run this script via the wsl to modify the win10 notion app.
-python scripts must be run from the bash terminal or windows command prompt - directly opening/running them may not work.
(the styles should also work for the web version. these can be installed via an extension like stylus or a built-in feature like userChrome.css.)
@@ -36,6 +35,14 @@ even if you are running the script from the wsl).i'm updating from an old version of the enhancer?
+you must first run cleaner.py before running customiser.py.
i tried opening the python file but it just closed instantly and nothing happened?
+python scripts must be run from the wsl terminal or windows command prompt via e.g. python customiser.py.
now that i've run the script, can i delete this folder?
+no! user style files resources/user.css and resources/theme.css are fetched from here each time you open notion.
+additionally, if you ever need to change or reset your notion build, the customiser.py and cleaner.py files will be useful.
unless you're sure you know what you're doing (if you have to ask, you probably don't) then do not delete anything.
to customise which characters are used for these buttons, open in the resources/preload.js file,
find the relevant button (read the comments) and replace its icon with your chosen unicode character (e.g.
-replacing element.innerHTML = '▢'; with element.innerHTML = '🙄';).
element.innerHTML = '⨉'; with element.innerHTML = '🙄';).
customiser.py af
⨉. does not apply if multiple notion windows are open. (default: false)
+
styling
-
- due to customiser.py setting up a direct link to resources/user.css,
-changes will be applied instantly on notion reload
-(no need to re-run customiser.py every time you want to change some styles).
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).
- colour theming -
-this replaces the default notion dark theme. the provided theme file is my custom dark+ theme: -if you have another you wish to share, please contact me. if a few themes are provided i will -set up a distribution method (either including as optional themes or sharing on the website).
-to enable, see the tray options.
-to modify, enter the theme.css file and change the colour values within the :root {} - value names
-should describe what each colour will affect.
- hide discussions (comment threads at the top of each page) -
-.notion-page-view-discussion {
- display: none !important;
-}- custom fonts -
-the @import statement must be added to the top of the user.css file (with nothing above it
-except comments or other @import statements)
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Oxygen&family=Roboto+Slab:wght@300&display=swap');
-.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;
-}- wider page view -
-.notion-peek-renderer > div:nth-child(2) {
- max-width: 85vw !important;
-}- thinner cover image -
-[style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'] {
- height: 12vh !important;
-}
-[style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;']
- img {
- height: 20vh !important;
-}- table columns below 100px -
-not recommended! this is unreliable and will cause bugs. -coincidentally, this is also what the youtube video linked above shows how to do. -as it is a per-table-column style, unlike all others here, it must be prepended with the block ID.
-[data-block-id^='ID']
- > [style^='display: flex; position: absolute; background: rgb(47, 52, 55); z-index: 82; height: 33px; color: rgba(255, 255, 255, 0.6);']
- > div:nth-child(1)
- > div:nth-child(10)
- > div:nth-child(1),
-[data-block-id^='ID']
- > [style^='position: relative; min-width: calc(100% - 192px);']
- > [data-block-id]
- > div:nth-child(10),
-[data-block-id^='ID'] > div:nth-child(5) > div:nth-child(10) {
- width: 45px !important;
-}
-[data-block-id^='ID']
- [style^='position: absolute; top: 0px; left: 0px; pointer-events: none;']:not(.notion-presence-container) {
- display: none;
-}- hide '+ new' table row -
-.notion-table-view-add-row {
- display: none !important;
-}- hide calculations table row -
-.notion-table-view-add-row + div {
- display: none !important;
-}- hide '+ new' board row -
-.notion-board-group
- [style='user-select: none; transition: background 120ms ease-in 0s; cursor: pointer; display: inline-flex; align-items: center; flex-shrink: 0; white-space: nowrap; height: 32px; border-radius: 3px; font-size: 14px; line-height: 1.2; min-width: 0px; padding-left: 6px; padding-right: 8px; color: rgba(255, 255, 255, 0.4); width: 100%;'] {
- display: none !important;
-}- hide board view 'add a group' -
-.notion-board-view > [data-block-id] > div:last-child,
-.notion-board-view > [data-block-id] > div:first-child > div:last-child {
- display: none !important;
-}- centre-align table column headers -
-.notion-table-view-header-cell > div > div {
- margin: 0px auto;
-}- smaller table column header icons -
-[style^='display: flex; position: absolute; background: rgb(47, 52, 55); z-index: 82; height: 33px; color: rgba(255, 255, 255, 0.6);']
- div:nth-child(1)
- svg {
- height: 10px !important;
- width: 10px !important;
- margin-right: -4px;
-}- remove icons from table column headers -
-.notion-table-view-header-cell [style^='margin-right: 6px;'] {
- display: none !important;
-}- removing/decreasing side padding for tables -
-[style^='flex-shrink: 0; flex-grow: 1; width: 100%; max-width: 100%; display: flex; align-items: center; flex-direction: column; font-size: 16px; color: rgba(255, 255, 255, 0.9); padding: 0px 96px 30vh;']
- .notion-table-view,
-[class='notion-scroller'] > .notion-table-view {
- padding-left: 35px !important;
- padding-right: 15px !important;
- min-width: 0% !important;
-}
-[style^='flex-shrink: 0; flex-grow: 1; width: 100%; max-width: 100%; display: flex; align-items: center; flex-direction: column; font-size: 16px; color: rgba(255, 255, 255, 0.9); padding: 0px 96px 30vh;']
- .notion-selectable
- .notion-scroller.horizontal::-webkit-scrollbar-track {
- margin-left: 10px;
- margin-right: 10px;
-}- removing/decreasing side padding for boards -
-.notion-board-view {
- padding-left: 10px !important;
- padding-right: 10px !important;
-}@@ -354,4 +127,4 @@ as it is a per-table-column style, unlike all others here, it must be prepended
if you have any questions, check my website for contact details.
notion enhancer
+ styling +
+to modify the appearance of the notion app, edit the style rules in resources/user.css,
+use some of the suggested/documented optional styles below, or invent your own.
these styles are written in a language called "CSS". if you don't know what this is and are interested, +check out some youtube videos or try a free short course like the one on codecademy.
+due to the enhancements directly fetching from the local CSS files,
+changes will be applied instantly on notion reload
+(no need to re-run customiser.py every time you want to change some styles).
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).
+ colour theming +
+this replaces the default notion dark theme. the provided theme file is my custom dark+ theme: +if you have another you wish to share, please contact me. if a few themes are submitted i will +set up a distribution method (either including them as optionally-enableabled themes or sharing them on the website).
+to enable, see the tray options.
+to modify, enter the theme.css file and change the colour values within the :root {} - value names
+should describe what each colour will affect.
+ hide discussions (comment threads at the top of each page) +
+.notion-page-view-discussion {
+ display: none !important;
+}+ custom fonts +
+the @import statement must be added to the top of the file (with nothing above it
+except comments or other @import statements)
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Oxygen&family=Roboto+Slab:wght@300&display=swap');
+.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;
+}+ wider page view +
+.notion-peek-renderer > div:nth-child(2) {
+ max-width: 85vw !important;
+}+ thinner cover image +
+[style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'] {
+ height: 12vh !important;
+}
+[style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;']
+ img {
+ height: 20vh !important;
+}+ table columns below 100px +
+not recommended! this is unreliable and will cause bugs. +coincidentally, this is also what the youtube video linked above shows how to do. +as it is a per-table-column style, unlike all others here, it must be prepended with the block ID.
+[data-block-id^='ID']
+ > [style^='display: flex; position: absolute; background: rgb(47, 52, 55); z-index: 82; height: 33px; color: rgba(255, 255, 255, 0.6);']
+ > div:nth-child(1)
+ > div:nth-child(10)
+ > div:nth-child(1),
+[data-block-id^='ID']
+ > [style^='position: relative; min-width: calc(100% - 192px);']
+ > [data-block-id]
+ > div:nth-child(10),
+[data-block-id^='ID'] > div:nth-child(5) > div:nth-child(10) {
+ width: 45px !important;
+}
+[data-block-id^='ID']
+ [style^='position: absolute; top: 0px; left: 0px; pointer-events: none;']:not(.notion-presence-container) {
+ display: none;
+}+ hide '+ new' table row +
+.notion-table-view-add-row {
+ display: none !important;
+}+ hide calculations table row +
+.notion-table-view-add-row + div {
+ display: none !important;
+}+ hide '+ new' board row +
+.notion-board-group
+ [style='user-select: none; transition: background 120ms ease-in 0s; cursor: pointer; display: inline-flex; align-items: center; flex-shrink: 0; white-space: nowrap; height: 32px; border-radius: 3px; font-size: 14px; line-height: 1.2; min-width: 0px; padding-left: 6px; padding-right: 8px; color: rgba(255, 255, 255, 0.4); width: 100%;'] {
+ display: none !important;
+}+ hide board view 'add a group' +
+.notion-board-view > [data-block-id] > div:last-child,
+.notion-board-view > [data-block-id] > div:first-child > div:last-child {
+ display: none !important;
+}+ centre-align table column headers +
+.notion-table-view-header-cell > div > div {
+ margin: 0px auto;
+}+ smaller table column header icons +
+[style^='display: flex; position: absolute; background: rgb(47, 52, 55); z-index: 82; height: 33px; color: rgba(255, 255, 255, 0.6);']
+ div:nth-child(1)
+ svg {
+ height: 10px !important;
+ width: 10px !important;
+ margin-right: -4px;
+}+ remove icons from table column headers +
+.notion-table-view-header-cell [style^='margin-right: 6px;'] {
+ display: none !important;
+}+ removing/decreasing side padding for tables +
+[style^='flex-shrink: 0; flex-grow: 1; width: 100%; max-width: 100%; display: flex; align-items: center; flex-direction: column; font-size: 16px; color: rgba(255, 255, 255, 0.9); padding: 0px 96px 30vh;']
+ .notion-table-view,
+[class='notion-scroller'] > .notion-table-view {
+ padding-left: 35px !important;
+ padding-right: 15px !important;
+ min-width: 0% !important;
+}
+[style^='flex-shrink: 0; flex-grow: 1; width: 100%; max-width: 100%; display: flex; align-items: center; flex-direction: column; font-size: 16px; color: rgba(255, 255, 255, 0.9); padding: 0px 96px 30vh;']
+ .notion-selectable
+ .notion-scroller.horizontal::-webkit-scrollbar-track {
+ margin-left: 10px;
+ margin-right: 10px;
+}+ removing/decreasing side padding for boards +
+.notion-board-view {
+ padding-left: 10px !important;
+ padding-right: 10px !important;
+}