mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-05 13:19:03 +00:00
new styles after user feedback
This commit is contained in:
parent
78c02e7dee
commit
ad040d83eb
GPG Key ID:
C7A48B7846AA706D
@ -3,6 +3,13 @@
|
||||
if something is ~~crossed out~~, then it is no longer a feature included by default,
|
||||
but can still easily be enabled by following instructions in the [docs](README.md).
|
||||
|
||||
### v0.5.1 (wip)
|
||||
|
||||
- new: hide discussions (thanks to [u/Roosmaryn](https://www.reddit.com/user/Roosmaryn/))
|
||||
- new: custom colour theming, demonstrated via the dark+ theme.
|
||||
- new: custom fonts.
|
||||
- new: font resizing.
|
||||
|
||||
### v0.5.0 (2020-05-23)
|
||||
|
||||
- new: running from the wsl.
|
||||
|
||||
92
README.md
92
README.md
@ -88,6 +88,96 @@ these should also work for the web version, if copied into your css customiser.
|
||||
css below will work for every instance of the element, but if you wish to hide only a specific element
|
||||
(e.g. the '+ new' table row) it is recommended that you prepend each selector with `[data-block-id='ID']` ([video tutorial on fetching IDs](https://www.youtube.com/watch?v=6V7eqShm_4w)).
|
||||
|
||||
#### dark+ theme
|
||||
|
||||
```css
|
||||
/*** dark+ ***/
|
||||
.notion-dark-theme .window-buttons {
|
||||
background: rgb(10, 10, 10);
|
||||
}
|
||||
.notion-dark-theme .window-buttons:hover {
|
||||
background: rgb(23, 23, 23);
|
||||
}
|
||||
/* sidebar */
|
||||
[style*='background: rgb(55, 60, 63)'],
|
||||
[style*='background: rgb(80, 85, 88)'] {
|
||||
background: rgb(0, 0, 0) !important;
|
||||
}
|
||||
/* main content */
|
||||
.notion-body.dark,
|
||||
[style*='background: rgb(47, 52, 55)'] {
|
||||
background: rgb(10, 10, 10) !important;
|
||||
}
|
||||
/* hovered buttons */
|
||||
[style*='background: rgb(71, 76, 80)'],
|
||||
[style*='background: rgb(98, 102, 104)'] {
|
||||
background: rgb(15, 15, 15) !important;
|
||||
box-shadow: 0 0 0 0.5px rgba(78, 78, 78, 0.7);
|
||||
}
|
||||
/* database elements: e.g. view select, calendar event */
|
||||
[style*='background: rgb(63, 68, 71)'] {
|
||||
background: rgb(4, 4, 4) !important;
|
||||
border: 0.5px solid rgba(59, 59, 59, 0.7);
|
||||
}
|
||||
```
|
||||
|
||||
#### hide discussions (comment threads at the top of each page)
|
||||
|
||||
```css
|
||||
.notion-page-view-discussion {
|
||||
display: none !important;
|
||||
}
|
||||
```
|
||||
|
||||
#### custom fonts
|
||||
|
||||
**styles must be added to the top of the `user.css` file, so that nothing (other than comments) is above them @import statement**
|
||||
|
||||
```css
|
||||
.notion-app-inner {
|
||||
font-family: 'Oxygen', sans-serif !important;
|
||||
}
|
||||
[style*='monospace;'] {
|
||||
font-family: 'Fira Code', monospace !important;
|
||||
}
|
||||
[style*=', serif;'] {
|
||||
font-family: 'Roboto Slab', serif !important;
|
||||
}
|
||||
```
|
||||
|
||||
### font resizing
|
||||
|
||||
**not recommended:** this can mess up container sizes.
|
||||
it is suggested to instead use `ctrl+` or `ctrl-` to scale everything up/down.
|
||||
|
||||
```css
|
||||
/* font sizes */
|
||||
:root {
|
||||
--font-scale: 1;
|
||||
}
|
||||
.notion-app-inner {
|
||||
font-size: calc(var(--font-scale) * 16px) !important;
|
||||
}
|
||||
[style*='font-size: 40px'] {
|
||||
font-size: calc(var(--font-scale) * 40px) !important;
|
||||
}
|
||||
[style*='font-size: 16px'] {
|
||||
font-size: calc(var(--font-scale) * 16px) !important;
|
||||
}
|
||||
[style*='font-size: 14px'] {
|
||||
font-size: calc(var(--font-scale) * 14px) !important;
|
||||
}
|
||||
[style*='font-size: 12px'] {
|
||||
font-size: calc(var(--font-scale) * 12px) !important;
|
||||
}
|
||||
[style*='font-size: 11px'] {
|
||||
font-size: calc(var(--font-scale) * 11px) !important;
|
||||
}
|
||||
[style*='font-size: 1.25em'] {
|
||||
font-size: calc(var(--font-scale) * 1.25em) !important;
|
||||
}
|
||||
```
|
||||
|
||||
#### wider page view
|
||||
|
||||
```css
|
||||
@ -233,8 +323,6 @@ as it is a per-table-column style, unlike all others here, it must be prepended
|
||||
|
||||
## other details
|
||||
|
||||
i have an unhealthy habit of avoiding capital letters. nothing enforces this, i just do it.
|
||||
|
||||
the notion logo belongs entirely to the notion team, and was sourced from their
|
||||
[media kit](https://www.notion.so/Media-Kit-205535b1d9c4440497a3d7a2ac096286).
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
|
||||
# Notion Enhancer
|
||||
# notion-enhancer
|
||||
# (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
|
||||
# (c) 2020 TarasokUA
|
||||
# (https://dragonwocky.me/) under the MIT license
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
|
||||
# Notion Enhancer
|
||||
# notion-enhancer
|
||||
# (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
|
||||
# (c) 2020 TarasokUA
|
||||
# (https://dragonwocky.me/) under the MIT license
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><!-- Documentative--><!-- (c) 2020 dragonwocky <thedragonring.bod@gmail.com>--><!-- (https://dragonwocky.me/) under the MIT license--><html prefix="og: http://ogp.me/ns#"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>changelog | notion enhancer</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Nunito+Sans"><link rel="stylesheet" href="docs.css"><script src="docs.js"></script><link rel="icon" href="web-logo.png" media="(prefers-color-scheme: dark)"><link rel="icon" href="web-logo.png"><meta name="title" content="changelog | notion enhancer"><meta name="description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta name="theme-color" content="rgb(75, 133, 209)"><meta property="og:type" content="article"><meta property="og:url" content="https://dragonwocky.me/notion-enhancer/changelog.html"><meta property="og:title" content="changelog"><meta property="og:site_name" content="notion enhancer"><meta property="og:description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta property="og:image" content="https://dragonwocky.me/notion-enhancer/web-logo.png"><meta property="twitter:card" content="summary"></head><body><aside class="menu"><div><div class="title"><h1>notion enhancer</h1><picture class="icon"><source srcset="web-logo.png" media="(prefers-color-scheme: dark)"><img src="web-logo.png"></picture></div></div><ul class="nav"><li class="entry"><a href="index.html">notion enhancer</a></li><li class="entry"><p>resources</p></li><li class="entry"><a href="#changelog">changelog</a><ul><li class="level-3"><a href="#v050-2020-05-23">v0.5.0 (2020-05-23)</a></li><li class="level-3"><a href="#v041-2020-02-13">v0.4.1 (2020-02-13)</a></li><li class="level-3"><a href="#v040">v0.4.0</a></li><li class="level-3"><a href="#v030">v0.3.0</a></li><li class="level-3"><a href="#v020">v0.2.0</a></li><li class="level-3"><a href="#v010">v0.1.0</a></li></ul></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/blob/master/LICENSE">license</a></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/">github</a></li><li class="entry"><a href="https://dragonwocky.me/">me (dragonwocky)</a></li></ul><p class="mark"><a href="https://dragonwocky.me/documentative">docs by documentative</a></p></aside><div class="wrapper"><div class="toggle"><button>☰</button><h1>notion enhancer</h1></div><article class="documentative"><div class="content">
|
||||
<!DOCTYPE html><!-- Documentative--><!-- (c) 2020 dragonwocky <thedragonring.bod@gmail.com>--><!-- (https://dragonwocky.me/) under the MIT license--><html prefix="og: http://ogp.me/ns#"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>changelog | notion enhancer</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Nunito+Sans"><link rel="stylesheet" href="docs.css"><script src="docs.js"></script><link rel="icon" href="web-logo.png" media="(prefers-color-scheme: dark)"><link rel="icon" href="web-logo.png"><meta name="title" content="changelog | notion enhancer"><meta name="description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta name="theme-color" content="rgb(75, 133, 209)"><meta property="og:type" content="article"><meta property="og:url" content="https://dragonwocky.me/notion-enhancer/changelog.html"><meta property="og:title" content="changelog"><meta property="og:site_name" content="notion enhancer"><meta property="og:description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta property="og:image" content="https://dragonwocky.me/notion-enhancer/web-logo.png"><meta property="twitter:card" content="summary"></head><body><aside class="menu"><div><div class="title"><h1>notion enhancer</h1><picture class="icon"><source srcset="web-logo.png" media="(prefers-color-scheme: dark)"><img src="web-logo.png"></picture></div></div><ul class="nav"><li class="entry"><a href="index.html">notion enhancer</a></li><li class="entry"><p>resources</p></li><li class="entry"><a href="#changelog">changelog</a><ul><li class="level-3"><a href="#v051-wip">v0.5.1 (wip)</a></li><li class="level-3"><a href="#v050-2020-05-23">v0.5.0 (2020-05-23)</a></li><li class="level-3"><a href="#v041-2020-02-13">v0.4.1 (2020-02-13)</a></li><li class="level-3"><a href="#v040">v0.4.0</a></li><li class="level-3"><a href="#v030">v0.3.0</a></li><li class="level-3"><a href="#v020">v0.2.0</a></li><li class="level-3"><a href="#v010">v0.1.0</a></li></ul></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/blob/master/LICENSE">license</a></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/">github</a></li><li class="entry"><a href="https://dragonwocky.me/">me (dragonwocky)</a></li></ul><p class="mark"><a href="https://dragonwocky.me/documentative">docs by documentative</a></p></aside><div class="wrapper"><div class="toggle"><button>☰</button><h1>notion enhancer</h1></div><article class="documentative"><div class="content">
|
||||
|
||||
<section class="block" id="changelog">
|
||||
<h1>
|
||||
@ -7,6 +7,18 @@
|
||||
<p>if something is <del>crossed out</del>, then it is no longer a feature included by default,
|
||||
but can still easily be enabled by following instructions in the <a href="/index.html">docs</a>.</p>
|
||||
|
||||
</section>
|
||||
<section class="block" id="v051-wip">
|
||||
<h3>
|
||||
<a href="#v051-wip">v0.5.1 (wip)</a>
|
||||
</h3>
|
||||
<ul>
|
||||
<li>new: hide discussions (thanks to <a href="https://www.reddit.com/user/Roosmaryn/">u/Roosmaryn</a>)</li>
|
||||
<li>new: custom colour theming, demonstrated via the dark+ theme.</li>
|
||||
<li>new: custom fonts.</li>
|
||||
<li>new: font resizing.</li>
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
<section class="block" id="v050-2020-05-23">
|
||||
<h3>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><!-- Documentative--><!-- (c) 2020 dragonwocky <thedragonring.bod@gmail.com>--><!-- (https://dragonwocky.me/) under the MIT license--><html prefix="og: http://ogp.me/ns#"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>notion enhancer</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Nunito+Sans"><link rel="stylesheet" href="docs.css"><script src="docs.js"></script><link rel="icon" href="web-logo.png" media="(prefers-color-scheme: dark)"><link rel="icon" href="web-logo.png"><meta name="title" content="notion enhancer"><meta name="description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta name="theme-color" content="rgb(75, 133, 209)"><meta property="og:type" content="article"><meta property="og:url" content="https://dragonwocky.me/notion-enhancer/index.html"><meta property="og:title" content="notion enhancer"><meta property="og:site_name" content="notion enhancer"><meta property="og:description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta property="og:image" content="https://dragonwocky.me/notion-enhancer/web-logo.png"><meta property="twitter:card" content="summary"></head><body><aside class="menu"><div><div class="title"><h1>notion enhancer</h1><picture class="icon"><source srcset="web-logo.png" media="(prefers-color-scheme: dark)"><img src="web-logo.png"></picture></div></div><ul class="nav"><li class="entry"><a href="#notion-enhancer">notion enhancer</a><ul><li class="level-2"><a href="#installation">installation</a></li><li class="level-2"><a href="#this-is-a-fork">this is a fork</a></li><li class="level-2"><a href="#features">features</a></li><li class="level-3"><a href="#titlebar">titlebar</a></li><li class="level-3"><a href="#nicer-scrollbars">nicer scrollbars</a></li><li class="level-3"><a href="#hotkeys">hotkeys</a></li><li class="level-3"><a href="#tray">tray</a></li><li class="level-3"><a href="#styling">styling</a></li><li class="level-4"><a href="#wider-page-view">wider page view</a></li><li class="level-4"><a href="#thinner-cover-image">thinner cover image</a></li><li class="level-4"><a href="#table-columns-below-100px">table columns below 100px</a></li><li class="level-4"><a href="#hide--new-table-row">hide '+ new' table row</a></li><li class="level-4"><a href="#hide-calculations-table-row">hide calculations table row</a></li><li class="level-4"><a href="#hide--new-board-row">hide '+ new' board row</a></li><li class="level-4"><a href="#hide-board-view-hidden-columns">hide board view hidden columns</a></li><li class="level-4"><a href="#hide-board-view-add-a-group">hide board view 'add a group'</a></li><li class="level-4"><a href="#centre-align-table-column-headers">centre-align table column headers</a></li><li class="level-4"><a href="#smaller-table-column-header-icons">smaller table column header icons</a></li><li class="level-4"><a href="#remove-icons-from-table-column-headers">remove icons from table column headers</a></li><li class="level-4"><a href="#removingdecreasing-side-padding-for-tables">removing/decreasing side padding for tables</a></li><li class="level-4"><a href="#removingdecreasing-side-padding-for-boards">removing/decreasing side padding for boards</a></li><li class="level-2"><a href="#other-details">other details</a></li></ul></li><li class="entry"><p>resources</p></li><li class="entry"><a href="changelog.html">changelog</a></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/blob/master/LICENSE">license</a></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/">github</a></li><li class="entry"><a href="https://dragonwocky.me/">me (dragonwocky)</a></li></ul><p class="mark"><a href="https://dragonwocky.me/documentative">docs by documentative</a></p></aside><div class="wrapper"><div class="toggle"><button>☰</button><h1>notion enhancer</h1></div><article class="documentative"><div class="content">
|
||||
<!DOCTYPE html><!-- Documentative--><!-- (c) 2020 dragonwocky <thedragonring.bod@gmail.com>--><!-- (https://dragonwocky.me/) under the MIT license--><html prefix="og: http://ogp.me/ns#"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>notion enhancer</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Nunito+Sans"><link rel="stylesheet" href="docs.css"><script src="docs.js"></script><link rel="icon" href="web-logo.png" media="(prefers-color-scheme: dark)"><link rel="icon" href="web-logo.png"><meta name="title" content="notion enhancer"><meta name="description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta name="theme-color" content="rgb(75, 133, 209)"><meta property="og:type" content="article"><meta property="og:url" content="https://dragonwocky.me/notion-enhancer/index.html"><meta property="og:title" content="notion enhancer"><meta property="og:site_name" content="notion enhancer"><meta property="og:description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta property="og:image" content="https://dragonwocky.me/notion-enhancer/web-logo.png"><meta property="twitter:card" content="summary"></head><body><aside class="menu"><div><div class="title"><h1>notion enhancer</h1><picture class="icon"><source srcset="web-logo.png" media="(prefers-color-scheme: dark)"><img src="web-logo.png"></picture></div></div><ul class="nav"><li class="entry"><a href="#notion-enhancer">notion enhancer</a><ul><li class="level-2"><a href="#installation">installation</a></li><li class="level-2"><a href="#this-is-a-fork">this is a fork</a></li><li class="level-2"><a href="#features">features</a></li><li class="level-3"><a href="#titlebar">titlebar</a></li><li class="level-3"><a href="#nicer-scrollbars">nicer scrollbars</a></li><li class="level-3"><a href="#hotkeys">hotkeys</a></li><li class="level-3"><a href="#tray">tray</a></li><li class="level-3"><a href="#styling">styling</a></li><li class="level-4"><a href="#dark-theme">dark+ theme</a></li><li class="level-4"><a href="#hide-discussions-comment-threads-at-the-top-of-each-page">hide discussions (comment threads at the top of each page)</a></li><li class="level-4"><a href="#custom-fonts">custom fonts</a></li><li class="level-3"><a href="#font-resizing">font resizing</a></li><li class="level-4"><a href="#wider-page-view">wider page view</a></li><li class="level-4"><a href="#thinner-cover-image">thinner cover image</a></li><li class="level-4"><a href="#table-columns-below-100px">table columns below 100px</a></li><li class="level-4"><a href="#hide--new-table-row">hide '+ new' table row</a></li><li class="level-4"><a href="#hide-calculations-table-row">hide calculations table row</a></li><li class="level-4"><a href="#hide--new-board-row">hide '+ new' board row</a></li><li class="level-4"><a href="#hide-board-view-hidden-columns">hide board view hidden columns</a></li><li class="level-4"><a href="#hide-board-view-add-a-group">hide board view 'add a group'</a></li><li class="level-4"><a href="#centre-align-table-column-headers">centre-align table column headers</a></li><li class="level-4"><a href="#smaller-table-column-header-icons">smaller table column header icons</a></li><li class="level-4"><a href="#remove-icons-from-table-column-headers">remove icons from table column headers</a></li><li class="level-4"><a href="#removingdecreasing-side-padding-for-tables">removing/decreasing side padding for tables</a></li><li class="level-4"><a href="#removingdecreasing-side-padding-for-boards">removing/decreasing side padding for boards</a></li><li class="level-2"><a href="#other-details">other details</a></li></ul></li><li class="entry"><p>resources</p></li><li class="entry"><a href="changelog.html">changelog</a></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/blob/master/LICENSE">license</a></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/">github</a></li><li class="entry"><a href="https://dragonwocky.me/">me (dragonwocky)</a></li></ul><p class="mark"><a href="https://dragonwocky.me/documentative">docs by documentative</a></p></aside><div class="wrapper"><div class="toggle"><button>☰</button><h1>notion enhancer</h1></div><article class="documentative"><div class="content">
|
||||
|
||||
<section class="block" id="notion-enhancer">
|
||||
<h1>
|
||||
@ -113,6 +113,98 @@ changes will be applied instantly on notion reload
|
||||
<p>css below will work for every instance of the element, but if you wish to hide only a specific element
|
||||
(e.g. the '+ new' table row) it is recommended that you prepend each selector with <code>[data-block-id='ID']</code> (<a href="https://www.youtube.com/watch?v=6V7eqShm_4w">video tutorial on fetching IDs</a>).</p>
|
||||
|
||||
</section>
|
||||
<section class="block" id="dark-theme">
|
||||
<h4>
|
||||
<a href="#dark-theme">dark+ theme</a>
|
||||
</h4>
|
||||
<pre><code class="lang-css"><span class="hljs-comment">/*** dark+ ***/</span>
|
||||
<span class="hljs-selector-class">.notion-dark-theme</span> <span class="hljs-selector-class">.window-buttons</span> {
|
||||
<span class="hljs-attribute">background</span>: <span class="hljs-built_in">rgb</span>(<span class="hljs-number">10</span>, <span class="hljs-number">10</span>, <span class="hljs-number">10</span>);
|
||||
}
|
||||
<span class="hljs-selector-class">.notion-dark-theme</span> <span class="hljs-selector-class">.window-buttons</span><span class="hljs-selector-pseudo">:hover</span> {
|
||||
<span class="hljs-attribute">background</span>: <span class="hljs-built_in">rgb</span>(<span class="hljs-number">23</span>, <span class="hljs-number">23</span>, <span class="hljs-number">23</span>);
|
||||
}
|
||||
<span class="hljs-comment">/* sidebar */</span>
|
||||
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'background: rgb(55, 60, 63)'</span>]</span>,
|
||||
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'background: rgb(80, 85, 88)'</span>]</span> {
|
||||
<span class="hljs-attribute">background</span>: <span class="hljs-built_in">rgb</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>) <span class="hljs-meta">!important</span>;
|
||||
}
|
||||
<span class="hljs-comment">/* main content */</span>
|
||||
<span class="hljs-selector-class">.notion-body</span><span class="hljs-selector-class">.dark</span>,
|
||||
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'background: rgb(47, 52, 55)'</span>]</span> {
|
||||
<span class="hljs-attribute">background</span>: <span class="hljs-built_in">rgb</span>(<span class="hljs-number">10</span>, <span class="hljs-number">10</span>, <span class="hljs-number">10</span>) <span class="hljs-meta">!important</span>;
|
||||
}
|
||||
<span class="hljs-comment">/* hovered buttons */</span>
|
||||
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'background: rgb(71, 76, 80)'</span>]</span>,
|
||||
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'background: rgb(98, 102, 104)'</span>]</span> {
|
||||
<span class="hljs-attribute">background</span>: <span class="hljs-built_in">rgb</span>(<span class="hljs-number">15</span>, <span class="hljs-number">15</span>, <span class="hljs-number">15</span>) <span class="hljs-meta">!important</span>;
|
||||
<span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">0.5px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">78</span>, <span class="hljs-number">78</span>, <span class="hljs-number">78</span>, <span class="hljs-number">0.7</span>);
|
||||
}
|
||||
<span class="hljs-comment">/* database elements: e.g. view select, calendar event */</span>
|
||||
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'background: rgb(63, 68, 71)'</span>]</span> {
|
||||
<span class="hljs-attribute">background</span>: <span class="hljs-built_in">rgb</span>(<span class="hljs-number">4</span>, <span class="hljs-number">4</span>, <span class="hljs-number">4</span>) <span class="hljs-meta">!important</span>;
|
||||
<span class="hljs-attribute">border</span>: <span class="hljs-number">0.5px</span> solid <span class="hljs-built_in">rgba</span>(<span class="hljs-number">59</span>, <span class="hljs-number">59</span>, <span class="hljs-number">59</span>, <span class="hljs-number">0.7</span>);
|
||||
}</code></pre>
|
||||
|
||||
</section>
|
||||
<section class="block" id="hide-discussions-comment-threads-at-the-top-of-each-page">
|
||||
<h4>
|
||||
<a href="#hide-discussions-comment-threads-at-the-top-of-each-page">hide discussions (comment threads at the top of each page)</a>
|
||||
</h4>
|
||||
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-page-view-discussion</span> {
|
||||
<span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>;
|
||||
}</code></pre>
|
||||
|
||||
</section>
|
||||
<section class="block" id="custom-fonts">
|
||||
<h4>
|
||||
<a href="#custom-fonts">custom fonts</a>
|
||||
</h4>
|
||||
<p><strong>styles must be added to the top of the <code>user.css</code> file, so that nothing (other than comments) is above them @import statement</strong></p>
|
||||
<pre><code class="lang-css"><span class="hljs-selector-class">.notion-app-inner</span> {
|
||||
<span class="hljs-attribute">font-family</span>: <span class="hljs-string">'Oxygen'</span>, sans-serif <span class="hljs-meta">!important</span>;
|
||||
}
|
||||
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'monospace;'</span>]</span> {
|
||||
<span class="hljs-attribute">font-family</span>: <span class="hljs-string">'Fira Code'</span>, monospace <span class="hljs-meta">!important</span>;
|
||||
}
|
||||
<span class="hljs-selector-attr">[style*=<span class="hljs-string">', serif;'</span>]</span> {
|
||||
<span class="hljs-attribute">font-family</span>: <span class="hljs-string">'Roboto Slab'</span>, serif <span class="hljs-meta">!important</span>;
|
||||
}</code></pre>
|
||||
|
||||
</section>
|
||||
<section class="block" id="font-resizing">
|
||||
<h3>
|
||||
<a href="#font-resizing">font resizing</a>
|
||||
</h3>
|
||||
<p><strong>not recommended:</strong> this can mess up container sizes.
|
||||
it is suggested to instead use <code>ctrl+</code> or <code>ctrl-</code> to scale everything up/down.</p>
|
||||
<pre><code class="lang-css"><span class="hljs-comment">/* font sizes */</span>
|
||||
<span class="hljs-selector-pseudo">:root</span> {
|
||||
<span class="hljs-attribute">--font-scale</span>: <span class="hljs-number">1</span>;
|
||||
}
|
||||
<span class="hljs-selector-class">.notion-app-inner</span> {
|
||||
<span class="hljs-attribute">font-size</span>: <span class="hljs-built_in">calc</span>(var(--font-scale) * <span class="hljs-number">16px</span>) <span class="hljs-meta">!important</span>;
|
||||
}
|
||||
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'font-size: 40px'</span>]</span> {
|
||||
<span class="hljs-attribute">font-size</span>: <span class="hljs-built_in">calc</span>(var(--font-scale) * <span class="hljs-number">40px</span>) <span class="hljs-meta">!important</span>;
|
||||
}
|
||||
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'font-size: 16px'</span>]</span> {
|
||||
<span class="hljs-attribute">font-size</span>: <span class="hljs-built_in">calc</span>(var(--font-scale) * <span class="hljs-number">16px</span>) <span class="hljs-meta">!important</span>;
|
||||
}
|
||||
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'font-size: 14px'</span>]</span> {
|
||||
<span class="hljs-attribute">font-size</span>: <span class="hljs-built_in">calc</span>(var(--font-scale) * <span class="hljs-number">14px</span>) <span class="hljs-meta">!important</span>;
|
||||
}
|
||||
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'font-size: 12px'</span>]</span> {
|
||||
<span class="hljs-attribute">font-size</span>: <span class="hljs-built_in">calc</span>(var(--font-scale) * <span class="hljs-number">12px</span>) <span class="hljs-meta">!important</span>;
|
||||
}
|
||||
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'font-size: 11px'</span>]</span> {
|
||||
<span class="hljs-attribute">font-size</span>: <span class="hljs-built_in">calc</span>(var(--font-scale) * <span class="hljs-number">11px</span>) <span class="hljs-meta">!important</span>;
|
||||
}
|
||||
<span class="hljs-selector-attr">[style*=<span class="hljs-string">'font-size: 1.25em'</span>]</span> {
|
||||
<span class="hljs-attribute">font-size</span>: <span class="hljs-built_in">calc</span>(var(--font-scale) * <span class="hljs-number">1.25em</span>) <span class="hljs-meta">!important</span>;
|
||||
}</code></pre>
|
||||
|
||||
</section>
|
||||
<section class="block" id="wider-page-view">
|
||||
<h4>
|
||||
@ -273,8 +365,7 @@ as it is a per-table-column style, unlike all others here, it must be prepended
|
||||
<h2>
|
||||
<a href="#other-details">other details</a>
|
||||
</h2>
|
||||
<p>i have an unhealthy habit of avoiding capital letters. nothing enforces this, i just do it.</p>
|
||||
<p>the notion logo belongs entirely to the notion team, and was sourced from their
|
||||
<p>the notion logo belongs entirely to the notion team, and was sourced from their
|
||||
<a href="https://www.notion.so/Media-Kit-205535b1d9c4440497a3d7a2ac096286">media kit</a>.</p>
|
||||
<p>if you have any questions, check <a href="https://dragonwocky.me/">my website</a> for contact details.</p>
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/* === INJECTION MARKER === */
|
||||
|
||||
/*
|
||||
* Notion Enhancer
|
||||
* notion-enhancer
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
|
||||
* (c) 2020 TarasokUA
|
||||
* (https://dragonwocky.me/) under the MIT license
|
||||
@ -22,14 +22,14 @@ function enhancements() {
|
||||
defaults: {
|
||||
openhidden: false,
|
||||
maximised: false,
|
||||
tray: false
|
||||
}
|
||||
tray: false,
|
||||
},
|
||||
}),
|
||||
states = {
|
||||
startup: electron_1.app.getLoginItemSettings().openAtLogin,
|
||||
openhidden: store.get('openhidden'),
|
||||
maximised: store.get('maximised'),
|
||||
tray: store.get('tray')
|
||||
tray: store.get('tray'),
|
||||
};
|
||||
|
||||
tray = new Tray(path.join(__dirname, './notion.ico'));
|
||||
@ -42,7 +42,7 @@ function enhancements() {
|
||||
click: () =>
|
||||
contextMenu.getMenuItemById('startup').checked
|
||||
? electron_1.app.setLoginItemSettings({ openAtLogin: true })
|
||||
: electron_1.app.setLoginItemSettings({ openAtLogin: false })
|
||||
: electron_1.app.setLoginItemSettings({ openAtLogin: false }),
|
||||
},
|
||||
{
|
||||
id: 'openhidden',
|
||||
@ -52,7 +52,7 @@ function enhancements() {
|
||||
click: () =>
|
||||
contextMenu.getMenuItemById('openhidden').checked
|
||||
? store.set('openhidden', true)
|
||||
: store.set('openhidden', false)
|
||||
: store.set('openhidden', false),
|
||||
},
|
||||
{
|
||||
id: 'maximised',
|
||||
@ -62,7 +62,7 @@ function enhancements() {
|
||||
click: () =>
|
||||
contextMenu.getMenuItemById('maximised').checked
|
||||
? store.set('maximised', true)
|
||||
: store.set('maximised', false)
|
||||
: store.set('maximised', false),
|
||||
},
|
||||
{
|
||||
id: 'tray',
|
||||
@ -72,15 +72,15 @@ function enhancements() {
|
||||
click: () =>
|
||||
contextMenu.getMenuItemById('tray').checked
|
||||
? store.set('tray', true)
|
||||
: store.set('tray', false)
|
||||
: store.set('tray', false),
|
||||
},
|
||||
{
|
||||
type: 'separator'
|
||||
type: 'separator',
|
||||
},
|
||||
{
|
||||
label: '(x) quit',
|
||||
role: 'quit'
|
||||
}
|
||||
role: 'quit',
|
||||
},
|
||||
]);
|
||||
tray.setContextMenu(contextMenu);
|
||||
|
||||
@ -100,10 +100,10 @@ function enhancements() {
|
||||
const hotkey = '___hotkey___'; // will be set by python script
|
||||
electron_1.globalShortcut.register(hotkey, () => {
|
||||
const windows = electron_1.BrowserWindow.getAllWindows();
|
||||
if (windows.some(win => !win.isVisible())) {
|
||||
if (windows.some((win) => !win.isVisible())) {
|
||||
if (contextMenu.getMenuItemById('maximised').checked) {
|
||||
windows.forEach(win => win.maximize());
|
||||
} else windows.forEach(win => win.show());
|
||||
} else windows.forEach(win => win.hide());
|
||||
windows.forEach((win) => win.maximize());
|
||||
} else windows.forEach((win) => win.show());
|
||||
} else windows.forEach((win) => win.hide());
|
||||
});
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/* === INJECTION MARKER === */
|
||||
|
||||
/*
|
||||
* Notion Enhancer
|
||||
* notion-enhancer
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
|
||||
* (c) 2020 TarasokUA
|
||||
* (https://dragonwocky.me/) under the MIT license
|
||||
@ -70,8 +70,8 @@ require('electron').remote.getGlobal('setTimeout')(() => {
|
||||
const store = new (require(path.join(__dirname, '..', 'store.js')))({
|
||||
config: 'user-preferences',
|
||||
defaults: {
|
||||
tray: false
|
||||
}
|
||||
tray: false,
|
||||
},
|
||||
});
|
||||
if (
|
||||
store.get('tray') &&
|
||||
@ -87,7 +87,7 @@ require('electron').remote.getGlobal('setTimeout')(() => {
|
||||
/* reload window */
|
||||
document.defaultView.addEventListener(
|
||||
'keyup',
|
||||
ev => void (ev.code === 'F5' ? appwindow.reload() : 0),
|
||||
(ev) => void (ev.code === 'F5' ? appwindow.reload() : 0),
|
||||
true
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* Notion Enhancer
|
||||
* notion-enhancer
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
|
||||
* (c) 2020 TarasokUA
|
||||
* (https://dragonwocky.me/) under the MIT license
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* Notion Enhancer
|
||||
* notion-enhancer
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
|
||||
* (c) 2020 TarasokUA
|
||||
* (https://dragonwocky.me/) under the MIT license
|
||||
|
||||
Loading…
Reference in New Issue
Block a user