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

update docs. still needs screenshots + documentative update

Browse Source
This commit is contained in:
dragonwocky 2020-06-01 23:14:36 +10:00
parent c3436d372a
commit b9810c9d62
Signed by: dragonwocky
GPG Key ID: C7A48B7846AA706D
8 changed files with 527 additions and 487 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
CHANGELOG.md
View File

@ -3,13 +3,14 @@
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) ### v0.6.0 (wip)
- docs: custom colour theming, demonstrated via the dark+ theme.
- docs: custom fonts. - docs: custom fonts.
- docs: font resizing. - docs: font resizing.
- docs: hide discussions (thanks to [u/Roosmaryn](https://www.reddit.com/user/Roosmaryn/)) - docs: hide discussions (thanks to [u/Roosmaryn](https://www.reddit.com/user/Roosmaryn/))
- bugfix: specify UTF-8 encoding to prevent gbk codec errors (thanks to [@etnperlong](https://github.com/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](https://github.com/etnperlong))
### v0.5.0 (2020-05-23) ### v0.5.0 (2020-05-23)
@ -17,7 +18,7 @@ but can still easily be enabled by following instructions in the [docs](README.m
- new: reload window with f5. - new: reload window with f5.
- improved: code has been refactored and cleaned up, - improved: code has been refactored and cleaned up,
inc. file renaming and a `customiser.py` that doesn't require inc. file renaming and a `customiser.py` that doesn't require
a run of `cleaner.py` to build updates. a run of `cleaner.py` to build modifications.
improved: scrollbar colours that fit better with notion's theming. improved: scrollbar colours that fit better with notion's theming.
- bugfix: un-break having multiple notion windows open. - bugfix: un-break having multiple notion windows open.

246
README.md
View File

@ -6,8 +6,6 @@ an enhancer/customiser for the all-in-one productivity workspace [notion.so](htt
currently, only win10 is supported. it is possible to run this script via the wsl to modify the win10 notion app. 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](#styling) should also work for the web version. (the [styles](#styling) should also work for the web version.
these can be installed via an extension like [stylus](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en) these can be installed via an extension like [stylus](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en)
or a built-in feature like [userChrome.css](https://www.userchrome.org/).) or a built-in feature like [userChrome.css](https://www.userchrome.org/).)
@ -32,6 +30,21 @@ done: run notion and enjoy.
3. reboot. 3. reboot.
4. follow instructions above (ensuring notion _isn't_ running! again, check task manager). 4. follow instructions above (ensuring notion _isn't_ running! again, check task manager).
**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.
## this is a fork ## this is a fork
credit where credit is due, this was originally made by Uzver (github: [@TarasokUA](https://github.com/TarasokUA), credit where credit is due, this was originally made by Uzver (github: [@TarasokUA](https://github.com/TarasokUA),
@ -51,7 +64,7 @@ notion will remain the top visible window even if not focused.
to customise which characters are used for these buttons, open in the `resources/preload.js` file, 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. find the relevant button (read the comments) and replace its icon with your chosen unicode character (e.g.
replacing `element.innerHTML = '▢';` with `element.innerHTML = '🙄';`). replacing `element.innerHTML = '⨉';` with `element.innerHTML = '🙄';`).
### nicer scrollbars ### nicer scrollbars
@ -81,232 +94,9 @@ settings will be saved in `%localappdata%/Programs/Notion/resources/app/user-pre
- **close to tray**: close window to tray rather than closing outright - **close to tray**: close window to tray rather than closing outright
on click of `⨉`. does not apply if multiple notion windows are open. (default: false) on click of `⨉`. does not apply if multiple notion windows are open. (default: false)
- **load theme.css**: loads the custom colour theme file. - **load theme.css**: loads the custom colour theme file.
see [colour theming](#colour-theming) for more information. (default: false) see [colour theming](STYLING.md#colour-theming) for more information. (default: false)
### styling ## 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](https://www.youtube.com/watch?v=6V7eqShm_4w)).
#### 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](#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)
```css
.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)**
```css
@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.
```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
.notion-peek-renderer > div:nth-child(2) {
max-width: 85vw !important;
}
```
#### thinner cover image
```css
[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.
```css
[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
```css
.notion-table-view-add-row {
display: none !important;
}
```
#### hide calculations table row
```css
.notion-table-view-add-row + div {
display: none !important;
}
```
#### hide '+ new' board row
```css
.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 hidden columns
```css
.notion-board-view > [data-block-id] > div:nth-last-child(2),
.notion-board-view > [data-block-id] > div:first-child > div:nth-last-child(2) {
display: none !important;
}
```
#### hide board view 'add a group'
```css
.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
```css
.notion-table-view-header-cell > div > div {
margin: 0px auto;
}
```
#### smaller table column header icons
```css
[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
```css
.notion-table-view-header-cell [style^='margin-right: 6px;'] {
display: none !important;
}
```
#### removing/decreasing side padding for tables
```css
[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
```css
.notion-board-view {
padding-left: 10px !important;
padding-right: 10px !important;
}
```
## other details ## other details

230
STYLING.md Normal file
View File

@ -0,0 +1,230 @@
# 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](https://www.codecademy.com/learn/learn-css).
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](https://www.youtube.com/watch?v=6V7eqShm_4w)).
### 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](README.md#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)
```css
.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)**
```css
@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.
```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
.notion-peek-renderer > div:nth-child(2) {
max-width: 85vw !important;
}
```
### thinner cover image
```css
[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.
```css
[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
```css
.notion-table-view-add-row {
display: none !important;
}
```
### hide calculations table row
```css
.notion-table-view-add-row + div {
display: none !important;
}
```
### hide '+ new' board row
```css
.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 hidden columns
```css
.notion-board-view > [data-block-id] > div:nth-last-child(2),
.notion-board-view > [data-block-id] > div:first-child > div:nth-last-child(2) {
display: none !important;
}
```
### hide board view 'add a group'
```css
.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
```css
.notion-table-view-header-cell > div > div {
margin: 0px auto;
}
```
### smaller table column header icons
```css
[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
```css
.notion-table-view-header-cell [style^='margin-right: 6px;'] {
display: none !important;
}
```
### removing/decreasing side padding for tables
```css
[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
```css
.notion-board-view {
padding-left: 10px !important;
padding-right: 10px !important;
}
```

1
docs.json
View File

@ -14,6 +14,7 @@
"exclude": ["cleaner.py", "customiser.py", "resources/*", ".gitignore"], "exclude": ["cleaner.py", "customiser.py", "resources/*", ".gitignore"],
"nav": [ "nav": [
["index.html", "README.md"], ["index.html", "README.md"],
["styling.html", "STYLING.md"],
"resources", "resources",
["changelog.html", "CHANGELOG.md"], ["changelog.html", "CHANGELOG.md"],
[ [

15
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="#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"> <!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"><a href="styling.html">styling</a></li><li class="entry"><p>resources</p></li><li class="entry"><a href="#changelog">changelog</a><ul><li class="level-3"><a href="#v060-wip">v0.6.0 (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>
@ -8,16 +8,17 @@
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>
<section class="block" id="v051-wip"> <section class="block" id="v060-wip">
<h3> <h3>
<a href="#v051-wip">v0.5.1 (wip)</a> <a href="#v060-wip">v0.6.0 (wip)</a>
</h3> </h3>
<ul> <ul>
<li>docs: custom colour theming, demonstrated via the dark+ theme.</li>
<li>docs: custom fonts.</li> <li>docs: custom fonts.</li>
<li>docs: font resizing.</li> <li>docs: font resizing.</li>
<li>docs: hide discussions (thanks to <a href="https://www.reddit.com/user/Roosmaryn/">u/Roosmaryn</a>)</li> <li>docs: hide discussions (thanks to <a href="https://www.reddit.com/user/Roosmaryn/">u/Roosmaryn</a>)</li>
<li>bugfix: specify UTF-8 encoding to prevent gbk codec errors (thanks to <a href="https://github.com/etnperlong">@etnperlong</a>)</li> <li>new: custom colour theming, demonstrated via the dark+ theme.</li>
<li>improved: if hotkey is pressed while notion is unfocused, it will bring it to the front rather than hiding it.</li>
<li>bugfix: specify UTF-8 encoding to prevent multibyte/gbk codec errors (thanks to <a href="https://github.com/etnperlong">@etnperlong</a>)</li>
</ul> </ul>
</section> </section>
@ -30,7 +31,7 @@ but can still easily be enabled by following instructions in the <a href="/index
<li>new: reload window with f5.</li> <li>new: reload window with f5.</li>
<li>improved: code has been refactored and cleaned up, <li>improved: code has been refactored and cleaned up,
inc. file renaming and a <code>customiser.py</code> that doesn&#39;t require inc. file renaming and a <code>customiser.py</code> that doesn&#39;t require
a run of <code>cleaner.py</code> to build updates. a run of <code>cleaner.py</code> to build modifications.
improved: scrollbar colours that fit better with notion&#39;s theming.</li> improved: scrollbar colours that fit better with notion&#39;s theming.</li>
<li>bugfix: un-break having multiple notion windows open.</li> <li>bugfix: un-break having multiple notion windows open.</li>
</ul> </ul>
@ -103,4 +104,4 @@ improved: scrollbar colours that fit better with notion&#39;s theming.</li>
</ul> </ul>
</section></div><footer class="footer"><hr><p><a href="https://github.com/dragonwocky/notion-enhancer/blob/master/CHANGELOG.md">Edit on GitHub</a> // © 2020 dragonwocky &amp; Uzver, under the <a href="https://choosealicense.com/licenses/mit/">MIT license</a>.</p> </section></div><footer class="footer"><hr><p><a href="https://github.com/dragonwocky/notion-enhancer/blob/master/CHANGELOG.md">Edit on GitHub</a> // © 2020 dragonwocky &amp; Uzver, under the <a href="https://choosealicense.com/licenses/mit/">MIT license</a>.</p>
</footer><nav><a class="prev" href="index.html">ᐊ</a></nav></article></div></body></html> </footer><nav><a class="prev" href="styling.html">ᐊ</a></nav></article></div></body></html>

257
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="#colour-theming">colour theming</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-4"><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"> <!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-2"><a href="#styling">styling</a></li><li class="level-2"><a href="#other-details">other details</a></li></ul></li><li class="entry"><a href="styling.html">styling</a></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>
@ -12,7 +12,6 @@
<a href="#installation">installation</a> <a href="#installation">installation</a>
</h2> </h2>
<p>currently, only win10 is supported. it is possible to run this script via the wsl to modify the win10 notion app.</p> <p>currently, only win10 is supported. it is possible to run this script via the wsl to modify the win10 notion app.</p>
<p>python scripts must be run from the bash terminal or windows command prompt - directly opening/running them may not work.</p>
<p>(the <a href="#styling">styles</a> should also work for the web version. <p>(the <a href="#styling">styles</a> should also work for the web version.
these can be installed via an extension like <a href="https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en">stylus</a> these can be installed via an extension like <a href="https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en">stylus</a>
or a built-in feature like <a href="https://www.userchrome.org/">userChrome.css</a>.)</p> or a built-in feature like <a href="https://www.userchrome.org/">userChrome.css</a>.)</p>
@ -36,6 +35,14 @@ even if you are running the script from the wsl).</li>
<li>reboot.</li> <li>reboot.</li>
<li>follow instructions above (ensuring notion <em>isn&#39;t</em> running! again, check task manager).</li> <li>follow instructions above (ensuring notion <em>isn&#39;t</em> running! again, check task manager).</li>
</ol> </ol>
<p><strong>i&#39;m updating from an old version of the enhancer?</strong></p>
<p>you must first run <code>cleaner.py</code> before running <code>customiser.py</code>.</p>
<p><strong>i tried opening the python file but it just closed instantly and nothing happened?</strong></p>
<p>python scripts must be run from the wsl terminal or windows command prompt via e.g. <code>python customiser.py</code>.</p>
<p><strong>now that i&#39;ve run the script, can i delete this folder?</strong></p>
<p>no! user style files <code>resources/user.css</code> and <code>resources/theme.css</code> are fetched from here each time you open notion.
additionally, if you ever need to change or reset your notion build, the <code>customiser.py</code> and <code>cleaner.py</code> files will be useful.</p>
<p>unless you&#39;re sure you know what you&#39;re doing (if you have to ask, you probably don&#39;t) then do not delete anything.</p>
</section> </section>
<section class="block" id="this-is-a-fork"> <section class="block" id="this-is-a-fork">
@ -63,7 +70,7 @@ symbolised with an arrow (4th from the right). when toggled to point up,
notion will remain the top visible window even if not focused.</p> notion will remain the top visible window even if not focused.</p>
<p>to customise which characters are used for these buttons, open in the <code>resources/preload.js</code> file, <p>to customise which characters are used for these buttons, open in the <code>resources/preload.js</code> file,
find the relevant button (read the comments) and replace its icon with your chosen unicode character (e.g. find the relevant button (read the comments) and replace its icon with your chosen unicode character (e.g.
replacing <code>element.innerHTML = &#39;▢&#39;;</code> with <code>element.innerHTML = &#39;🙄&#39;;</code>).</p> replacing <code>element.innerHTML = &#39;⨉&#39;;</code> with <code>element.innerHTML = &#39;🙄&#39;;</code>).</p>
</section> </section>
<section class="block" id="nicer-scrollbars"> <section class="block" id="nicer-scrollbars">
@ -101,249 +108,15 @@ to your preference. you will need to run or re-run <code>customiser.py</code> af
<li><strong>close to tray</strong>: close window to tray rather than closing outright <li><strong>close to tray</strong>: close window to tray rather than closing outright
on click of <code>⨉</code>. does not apply if multiple notion windows are open. (default: false)</li> on click of <code>⨉</code>. does not apply if multiple notion windows are open. (default: false)</li>
<li><strong>load theme.css</strong>: loads the custom colour theme file. <li><strong>load theme.css</strong>: loads the custom colour theme file.
see <a href="#colour-theming">colour theming</a> for more information. (default: false)</li> see <a href="STYLING.md#colour-theming">colour theming</a> for more information. (default: false)</li>
</ul> </ul>
</section> </section>
<section class="block" id="styling"> <section class="block" id="styling">
<h3> <h2>
<a href="#styling">styling</a> <a href="#styling">styling</a>
</h3> </h2>
<p>due to <code>customiser.py</code> setting up a direct link to <code>resources/user.css</code>,
changes will be applied instantly on notion reload
(no need to re-run <code>customiser.py</code> every time you want to change some styles).</p>
<p>these should also work for the web version, if copied into your css customiser.</p>
<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>
</section>
<section class="block" id="colour-theming">
<h4>
<a href="#colour-theming">colour theming</a>
</h4>
<p>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).</p>
<p>to enable, see the <a href="#tray">tray</a> options.</p>
<p>to modify, enter the <code>theme.css</code> file and change the colour values within the <code>:root {}</code> - value names
should describe what each colour will affect.</p>
</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>the @import statement must be added to the top of the <code>user.css</code> file (with nothing above it</strong>
<strong>except comments or other @import statements)</strong></p>
<pre><code class="lang-css"><span class="hljs-keyword">@import</span> url(<span class="hljs-string">'https://fonts.googleapis.com/css2?family=Fira+Code&amp;family=Oxygen&amp;family=Roboto+Slab:wght@300&amp;display=swap'</span>);
<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">
<h4>
<a href="#font-resizing">font resizing</a>
</h4>
<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 class="block" id="wider-page-view">
<h4>
<a href="#wider-page-view">wider page view</a>
</h4>
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-peek-renderer</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child(2)</span> {
<span class="hljs-attribute">max-width</span>: <span class="hljs-number">85vw</span> <span class="hljs-meta">!important</span>;
}</code></pre>
</section>
<section class="block" id="thinner-cover-image">
<h4>
<a href="#thinner-cover-image">thinner cover image</a>
</h4>
<pre><code class="lang-css"><span class="hljs-selector-attr">[style^=<span class="hljs-string">'position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'</span>]</span> {
<span class="hljs-attribute">height</span>: <span class="hljs-number">12vh</span> <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-attr">[style^=<span class="hljs-string">'position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'</span>]</span>
<span class="hljs-selector-tag">img</span> {
<span class="hljs-attribute">height</span>: <span class="hljs-number">20vh</span> <span class="hljs-meta">!important</span>;
}</code></pre>
</section>
<section class="block" id="table-columns-below-100px">
<h4>
<a href="#table-columns-below-100px">table columns below 100px</a>
</h4>
<p><strong>not recommended!</strong> 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.</p>
<pre><code class="lang-css"><span class="hljs-selector-attr">[data-block-id^=<span class="hljs-string">'ID'</span>]</span>
&gt; <span class="hljs-selector-attr">[style^=<span class="hljs-string">'display: flex; position: absolute; background: rgb(47, 52, 55); z-index: 82; height: 33px; color: rgba(255, 255, 255, 0.6);'</span>]</span>
&gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child(1)</span>
&gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child(10)</span>
&gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child(1)</span>,
<span class="hljs-selector-attr">[data-block-id^=<span class="hljs-string">'ID'</span>]</span>
&gt; <span class="hljs-selector-attr">[style^=<span class="hljs-string">'position: relative; min-width: calc(100% - 192px);'</span>]</span>
&gt; <span class="hljs-selector-attr">[data-block-id]</span>
&gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child(10)</span>,
<span class="hljs-selector-attr">[data-block-id^=<span class="hljs-string">'ID'</span>]</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child(5)</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child(10)</span> {
<span class="hljs-attribute">width</span>: <span class="hljs-number">45px</span> <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-attr">[data-block-id^=<span class="hljs-string">'ID'</span>]</span>
<span class="hljs-selector-attr">[style^=<span class="hljs-string">'position: absolute; top: 0px; left: 0px; pointer-events: none;'</span>]</span><span class="hljs-selector-pseudo">:not(.notion-presence-container)</span> {
<span class="hljs-attribute">display</span>: none;
}</code></pre>
</section>
<section class="block" id="hide--new-table-row">
<h4>
<a href="#hide--new-table-row">hide '+ new' table row</a>
</h4>
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-table-view-add-row</span> {
<span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>;
}</code></pre>
</section>
<section class="block" id="hide-calculations-table-row">
<h4>
<a href="#hide-calculations-table-row">hide calculations table row</a>
</h4>
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-table-view-add-row</span> + <span class="hljs-selector-tag">div</span> {
<span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>;
}</code></pre>
</section>
<section class="block" id="hide--new-board-row">
<h4>
<a href="#hide--new-board-row">hide '+ new' board row</a>
</h4>
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-board-group</span>
<span class="hljs-selector-attr">[style=<span class="hljs-string">'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%;'</span>]</span> {
<span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>;
}</code></pre>
</section>
<section class="block" id="hide-board-view-hidden-columns">
<h4>
<a href="#hide-board-view-hidden-columns">hide board view hidden columns</a>
</h4>
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-board-view</span> &gt; <span class="hljs-selector-attr">[data-block-id]</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-last-child(2)</span>,
<span class="hljs-selector-class">.notion-board-view</span> &gt; <span class="hljs-selector-attr">[data-block-id]</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:first-child</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-last-child(2)</span> {
<span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>;
}</code></pre>
</section>
<section class="block" id="hide-board-view-add-a-group">
<h4>
<a href="#hide-board-view-add-a-group">hide board view 'add a group'</a>
</h4>
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-board-view</span> &gt; <span class="hljs-selector-attr">[data-block-id]</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:last-child</span>,
<span class="hljs-selector-class">.notion-board-view</span> &gt; <span class="hljs-selector-attr">[data-block-id]</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:first-child</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:last-child</span> {
<span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>;
}</code></pre>
</section>
<section class="block" id="centre-align-table-column-headers">
<h4>
<a href="#centre-align-table-column-headers">centre-align table column headers</a>
</h4>
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-table-view-header-cell</span> &gt; <span class="hljs-selector-tag">div</span> &gt; <span class="hljs-selector-tag">div</span> {
<span class="hljs-attribute">margin</span>: <span class="hljs-number">0px</span> auto;
}</code></pre>
</section>
<section class="block" id="smaller-table-column-header-icons">
<h4>
<a href="#smaller-table-column-header-icons">smaller table column header icons</a>
</h4>
<pre><code class="lang-css"><span class="hljs-selector-attr">[style^=<span class="hljs-string">'display: flex; position: absolute; background: rgb(47, 52, 55); z-index: 82; height: 33px; color: rgba(255, 255, 255, 0.6);'</span>]</span>
<span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child(1)</span>
<span class="hljs-selector-tag">svg</span> {
<span class="hljs-attribute">height</span>: <span class="hljs-number">10px</span> <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">width</span>: <span class="hljs-number">10px</span> <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">margin-right</span>: -<span class="hljs-number">4px</span>;
}</code></pre>
</section>
<section class="block" id="remove-icons-from-table-column-headers">
<h4>
<a href="#remove-icons-from-table-column-headers">remove icons from table column headers</a>
</h4>
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-table-view-header-cell</span> <span class="hljs-selector-attr">[style^=<span class="hljs-string">'margin-right: 6px;'</span>]</span> {
<span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>;
}</code></pre>
</section>
<section class="block" id="removingdecreasing-side-padding-for-tables">
<h4>
<a href="#removingdecreasing-side-padding-for-tables">removing/decreasing side padding for tables</a>
</h4>
<pre><code class="lang-css"><span class="hljs-selector-attr">[style^=<span class="hljs-string">'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;'</span>]</span>
<span class="hljs-selector-class">.notion-table-view</span>,
<span class="hljs-selector-attr">[class=<span class="hljs-string">'notion-scroller'</span>]</span> &gt; <span class="hljs-selector-class">.notion-table-view</span> {
<span class="hljs-attribute">padding-left</span>: <span class="hljs-number">35px</span> <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">padding-right</span>: <span class="hljs-number">15px</span> <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">min-width</span>: <span class="hljs-number">0%</span> <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-attr">[style^=<span class="hljs-string">'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;'</span>]</span>
<span class="hljs-selector-class">.notion-selectable</span>
<span class="hljs-selector-class">.notion-scroller</span><span class="hljs-selector-class">.horizontal</span><span class="hljs-selector-pseudo">::-webkit-scrollbar-track</span> {
<span class="hljs-attribute">margin-left</span>: <span class="hljs-number">10px</span>;
<span class="hljs-attribute">margin-right</span>: <span class="hljs-number">10px</span>;
}</code></pre>
</section>
<section class="block" id="removingdecreasing-side-padding-for-boards">
<h4>
<a href="#removingdecreasing-side-padding-for-boards">removing/decreasing side padding for boards</a>
</h4>
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-board-view</span> {
<span class="hljs-attribute">padding-left</span>: <span class="hljs-number">10px</span> <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">padding-right</span>: <span class="hljs-number">10px</span> <span class="hljs-meta">!important</span>;
}</code></pre>
</section> </section>
<section class="block" id="other-details"> <section class="block" id="other-details">
<h2> <h2>
@ -354,4 +127,4 @@ as it is a per-table-column style, unlike all others here, it must be prepended
<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>
</section></div><footer class="footer"><hr><p><a href="https://github.com/dragonwocky/notion-enhancer/blob/master/README.md">Edit on GitHub</a> // © 2020 dragonwocky &amp; Uzver, under the <a href="https://choosealicense.com/licenses/mit/">MIT license</a>.</p> </section></div><footer class="footer"><hr><p><a href="https://github.com/dragonwocky/notion-enhancer/blob/master/README.md">Edit on GitHub</a> // © 2020 dragonwocky &amp; Uzver, under the <a href="https://choosealicense.com/licenses/mit/">MIT license</a>.</p>
</footer><nav><a class="next" href="changelog.html">ᐅ</a></nav></article></div></body></html> </footer><nav><a class="next" href="styling.html">ᐅ</a></nav></article></div></body></html>

247
docs/styling.html Normal file
View File

@ -0,0 +1,247 @@
<!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>styling | 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="styling | 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/styling.html"><meta property="og:title" content="styling"><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"><a href="#styling">styling</a><ul><li class="level-3"><a href="#colour-theming">colour theming</a></li><li class="level-3"><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-3"><a href="#custom-fonts">custom fonts</a></li><li class="level-3"><a href="#font-resizing">font resizing</a></li><li class="level-3"><a href="#wider-page-view">wider page view</a></li><li class="level-3"><a href="#thinner-cover-image">thinner cover image</a></li><li class="level-3"><a href="#table-columns-below-100px">table columns below 100px</a></li><li class="level-3"><a href="#hide--new-table-row">hide '+ new' table row</a></li><li class="level-3"><a href="#hide-calculations-table-row">hide calculations table row</a></li><li class="level-3"><a href="#hide--new-board-row">hide '+ new' board row</a></li><li class="level-3"><a href="#hide-board-view-hidden-columns">hide board view hidden columns</a></li><li class="level-3"><a href="#hide-board-view-add-a-group">hide board view 'add a group'</a></li><li class="level-3"><a href="#centre-align-table-column-headers">centre-align table column headers</a></li><li class="level-3"><a href="#smaller-table-column-header-icons">smaller table column header icons</a></li><li class="level-3"><a href="#remove-icons-from-table-column-headers">remove icons from table column headers</a></li><li class="level-3"><a href="#removingdecreasing-side-padding-for-tables">removing/decreasing side padding for tables</a></li><li class="level-3"><a href="#removingdecreasing-side-padding-for-boards">removing/decreasing side padding for boards</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="styling">
<h1>
<a href="#styling">styling</a>
</h1>
<p>to modify the appearance of the notion app, edit the style rules in <code>resources/user.css</code>,
use some of the suggested/documented optional styles below, or invent your own.</p>
<p>these styles are written in a language called &quot;CSS&quot;. if you don&#39;t know what this is and are interested,
check out some youtube videos or <a href="https://www.codecademy.com/learn/learn-css">try a free short course like the one on codecademy</a>.</p>
<p>due to the enhancements directly fetching from the local CSS files,
changes will be applied instantly on notion reload
(no need to re-run <code>customiser.py</code> every time you want to change some styles).</p>
<p>these should also work for the web version, if copied into your css customiser.</p>
<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>
</section>
<section class="block" id="colour-theming">
<h3>
<a href="#colour-theming">colour theming</a>
</h3>
<p>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).</p>
<p>to enable, see the <a href="README.md#tray">tray</a> options.</p>
<p>to modify, enter the <code>theme.css</code> file and change the colour values within the <code>:root {}</code> - value names
should describe what each colour will affect.</p>
</section>
<section class="block" id="hide-discussions-comment-threads-at-the-top-of-each-page">
<h3>
<a href="#hide-discussions-comment-threads-at-the-top-of-each-page">hide discussions (comment threads at the top of each page)</a>
</h3>
<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">
<h3>
<a href="#custom-fonts">custom fonts</a>
</h3>
<p><strong>the <code>@import</code> statement must be added to the top of the file (with nothing above it</strong>
<strong>except comments or other <code>@import</code> statements)</strong></p>
<pre><code class="lang-css"><span class="hljs-keyword">@import</span> url(<span class="hljs-string">'https://fonts.googleapis.com/css2?family=Fira+Code&amp;family=Oxygen&amp;family=Roboto+Slab:wght@300&amp;display=swap'</span>);
<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 class="block" id="wider-page-view">
<h3>
<a href="#wider-page-view">wider page view</a>
</h3>
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-peek-renderer</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child(2)</span> {
<span class="hljs-attribute">max-width</span>: <span class="hljs-number">85vw</span> <span class="hljs-meta">!important</span>;
}</code></pre>
</section>
<section class="block" id="thinner-cover-image">
<h3>
<a href="#thinner-cover-image">thinner cover image</a>
</h3>
<pre><code class="lang-css"><span class="hljs-selector-attr">[style^=<span class="hljs-string">'position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'</span>]</span> {
<span class="hljs-attribute">height</span>: <span class="hljs-number">12vh</span> <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-attr">[style^=<span class="hljs-string">'position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'</span>]</span>
<span class="hljs-selector-tag">img</span> {
<span class="hljs-attribute">height</span>: <span class="hljs-number">20vh</span> <span class="hljs-meta">!important</span>;
}</code></pre>
</section>
<section class="block" id="table-columns-below-100px">
<h3>
<a href="#table-columns-below-100px">table columns below 100px</a>
</h3>
<p><strong>not recommended!</strong> 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.</p>
<pre><code class="lang-css"><span class="hljs-selector-attr">[data-block-id^=<span class="hljs-string">'ID'</span>]</span>
&gt; <span class="hljs-selector-attr">[style^=<span class="hljs-string">'display: flex; position: absolute; background: rgb(47, 52, 55); z-index: 82; height: 33px; color: rgba(255, 255, 255, 0.6);'</span>]</span>
&gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child(1)</span>
&gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child(10)</span>
&gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child(1)</span>,
<span class="hljs-selector-attr">[data-block-id^=<span class="hljs-string">'ID'</span>]</span>
&gt; <span class="hljs-selector-attr">[style^=<span class="hljs-string">'position: relative; min-width: calc(100% - 192px);'</span>]</span>
&gt; <span class="hljs-selector-attr">[data-block-id]</span>
&gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child(10)</span>,
<span class="hljs-selector-attr">[data-block-id^=<span class="hljs-string">'ID'</span>]</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child(5)</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child(10)</span> {
<span class="hljs-attribute">width</span>: <span class="hljs-number">45px</span> <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-attr">[data-block-id^=<span class="hljs-string">'ID'</span>]</span>
<span class="hljs-selector-attr">[style^=<span class="hljs-string">'position: absolute; top: 0px; left: 0px; pointer-events: none;'</span>]</span><span class="hljs-selector-pseudo">:not(.notion-presence-container)</span> {
<span class="hljs-attribute">display</span>: none;
}</code></pre>
</section>
<section class="block" id="hide--new-table-row">
<h3>
<a href="#hide--new-table-row">hide '+ new' table row</a>
</h3>
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-table-view-add-row</span> {
<span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>;
}</code></pre>
</section>
<section class="block" id="hide-calculations-table-row">
<h3>
<a href="#hide-calculations-table-row">hide calculations table row</a>
</h3>
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-table-view-add-row</span> + <span class="hljs-selector-tag">div</span> {
<span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>;
}</code></pre>
</section>
<section class="block" id="hide--new-board-row">
<h3>
<a href="#hide--new-board-row">hide '+ new' board row</a>
</h3>
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-board-group</span>
<span class="hljs-selector-attr">[style=<span class="hljs-string">'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%;'</span>]</span> {
<span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>;
}</code></pre>
</section>
<section class="block" id="hide-board-view-hidden-columns">
<h3>
<a href="#hide-board-view-hidden-columns">hide board view hidden columns</a>
</h3>
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-board-view</span> &gt; <span class="hljs-selector-attr">[data-block-id]</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-last-child(2)</span>,
<span class="hljs-selector-class">.notion-board-view</span> &gt; <span class="hljs-selector-attr">[data-block-id]</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:first-child</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-last-child(2)</span> {
<span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>;
}</code></pre>
</section>
<section class="block" id="hide-board-view-add-a-group">
<h3>
<a href="#hide-board-view-add-a-group">hide board view 'add a group'</a>
</h3>
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-board-view</span> &gt; <span class="hljs-selector-attr">[data-block-id]</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:last-child</span>,
<span class="hljs-selector-class">.notion-board-view</span> &gt; <span class="hljs-selector-attr">[data-block-id]</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:first-child</span> &gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:last-child</span> {
<span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>;
}</code></pre>
</section>
<section class="block" id="centre-align-table-column-headers">
<h3>
<a href="#centre-align-table-column-headers">centre-align table column headers</a>
</h3>
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-table-view-header-cell</span> &gt; <span class="hljs-selector-tag">div</span> &gt; <span class="hljs-selector-tag">div</span> {
<span class="hljs-attribute">margin</span>: <span class="hljs-number">0px</span> auto;
}</code></pre>
</section>
<section class="block" id="smaller-table-column-header-icons">
<h3>
<a href="#smaller-table-column-header-icons">smaller table column header icons</a>
</h3>
<pre><code class="lang-css"><span class="hljs-selector-attr">[style^=<span class="hljs-string">'display: flex; position: absolute; background: rgb(47, 52, 55); z-index: 82; height: 33px; color: rgba(255, 255, 255, 0.6);'</span>]</span>
<span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child(1)</span>
<span class="hljs-selector-tag">svg</span> {
<span class="hljs-attribute">height</span>: <span class="hljs-number">10px</span> <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">width</span>: <span class="hljs-number">10px</span> <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">margin-right</span>: -<span class="hljs-number">4px</span>;
}</code></pre>
</section>
<section class="block" id="remove-icons-from-table-column-headers">
<h3>
<a href="#remove-icons-from-table-column-headers">remove icons from table column headers</a>
</h3>
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-table-view-header-cell</span> <span class="hljs-selector-attr">[style^=<span class="hljs-string">'margin-right: 6px;'</span>]</span> {
<span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>;
}</code></pre>
</section>
<section class="block" id="removingdecreasing-side-padding-for-tables">
<h3>
<a href="#removingdecreasing-side-padding-for-tables">removing/decreasing side padding for tables</a>
</h3>
<pre><code class="lang-css"><span class="hljs-selector-attr">[style^=<span class="hljs-string">'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;'</span>]</span>
<span class="hljs-selector-class">.notion-table-view</span>,
<span class="hljs-selector-attr">[class=<span class="hljs-string">'notion-scroller'</span>]</span> &gt; <span class="hljs-selector-class">.notion-table-view</span> {
<span class="hljs-attribute">padding-left</span>: <span class="hljs-number">35px</span> <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">padding-right</span>: <span class="hljs-number">15px</span> <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">min-width</span>: <span class="hljs-number">0%</span> <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-attr">[style^=<span class="hljs-string">'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;'</span>]</span>
<span class="hljs-selector-class">.notion-selectable</span>
<span class="hljs-selector-class">.notion-scroller</span><span class="hljs-selector-class">.horizontal</span><span class="hljs-selector-pseudo">::-webkit-scrollbar-track</span> {
<span class="hljs-attribute">margin-left</span>: <span class="hljs-number">10px</span>;
<span class="hljs-attribute">margin-right</span>: <span class="hljs-number">10px</span>;
}</code></pre>
</section>
<section class="block" id="removingdecreasing-side-padding-for-boards">
<h3>
<a href="#removingdecreasing-side-padding-for-boards">removing/decreasing side padding for boards</a>
</h3>
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-board-view</span> {
<span class="hljs-attribute">padding-left</span>: <span class="hljs-number">10px</span> <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">padding-right</span>: <span class="hljs-number">10px</span> <span class="hljs-meta">!important</span>;
}</code></pre>
</section></div><footer class="footer"><hr><p><a href="https://github.com/dragonwocky/notion-enhancer/blob/master/STYLING.md">Edit on GitHub</a> // © 2020 dragonwocky &amp; Uzver, under the <a href="https://choosealicense.com/licenses/mit/">MIT license</a>.</p>
</footer><nav><a class="prev" href="index.html">ᐊ</a><a class="next" href="changelog.html">ᐅ</a></nav></article></div></body></html>

9
resources/theme.css
View File

@ -34,7 +34,6 @@
--theme-text_purple: rgb(154, 109, 215); --theme-text_purple: rgb(154, 109, 215);
--theme-text_pink: rgb(226, 85, 161); --theme-text_pink: rgb(226, 85, 161);
--theme-text_red: rgb(218, 47, 35); --theme-text_red: rgb(218, 47, 35);
--theme-bg_default: rgba(37, 37, 37, 0.815);
--theme-bg_gray: rgba(126, 128, 129, 0.5); --theme-bg_gray: rgba(126, 128, 129, 0.5);
--theme-bg_brown: #50331f; --theme-bg_brown: #50331f;
--theme-bg_orange: rgba(255, 155, 0, 0.58); --theme-bg_orange: rgba(255, 155, 0, 0.58);
@ -48,7 +47,8 @@
/** backgrounds **/ /** backgrounds **/
[style*='background: rgb(55, 60, 63)'] { [style*='background: rgb(55, 60, 63)'],
[style*='background: rgba(69, 75, 78, 0.3)'] {
background: var(--theme-sidebar) !important; background: var(--theme-sidebar) !important;
} }
.notion-dark-theme .window-buttons, .notion-dark-theme .window-buttons,
@ -65,6 +65,7 @@
.notion-table-view > :first-child > :first-child, .notion-table-view > :first-child > :first-child,
.notion-dark-theme .window-buttons:hover, .notion-dark-theme .window-buttons:hover,
[style*='background: rgb(71, 76, 80)'], [style*='background: rgb(71, 76, 80)'],
[style*='background: rgb(80, 85, 88)'],
[style*='background: rgb(98, 102, 104)'] { [style*='background: rgb(98, 102, 104)'] {
background: var(--theme-button) !important; background: var(--theme-button) !important;
box-shadow: 0 0 0 0.5px var(--theme-button_border); box-shadow: 0 0 0 0.5px var(--theme-button_border);
@ -103,10 +104,6 @@
background: var(--theme-primary-indicator) !important; background: var(--theme-primary-indicator) !important;
} }
[style*='background: rgb(80, 85, 88)'] {
background: var(--theme-bg_default) !important;
}
[style*='background: rgba(151, 154, 155, 0.5)'], [style*='background: rgba(151, 154, 155, 0.5)'],
[style*='background:rgb(69,75,78)'] { [style*='background:rgb(69,75,78)'] {
background: var(--theme-bg_gray) !important; background: var(--theme-bg_gray) !important;