merge js branch into master

.gitignore

@@ -1,4 +1,3 @@
-
 # Logs
 logs
 *.log
@@ -6,7 +5,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
-.vscode
 
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

CHANGELOG.md

@@ -1,12 +1,41 @@
 # changelog
 
-if something is ~~crossed out~~, then it is no longer a feature included by default,
+**potential future features (not confirmed)**
-but can still easily be enabled by following instructions in the [docs](README.md).
+
+- [groupy-like tabbing](https://www.npmjs.com/package/electron-tabs)
+- [improved responsiveness](https://chrome.google.com/webstore/detail/notion%20%20-responsiveness-f/leadcilhbmibbkgbnjgmmnfgnnhmeddk)
+- [highlight/mark viewer](https://chrome.google.com/webstore/detail/notion%2B-mark-manager/hipgmnlpnimedfepbfbfiaobohhffcfc)
+
+### v0.8.0 (2020-08-27)
+
+complete rewrite with node.js.
+
+- new: simpler cli installation system (inc. commands: `apply`, `remove`, and `check`).
+- new: mod loading system (easier to create new mods, adds to notion rather than overwriting).
+- new: mod configuration menu.
+- improved: more theming variable coverage - inc. light theme and sizing/spacing.
+- bugfix: non-reproducable errors with python.
+- bugfix: better launcher patching on linux.
+- bugfix: fix frameless window issue introduced by notion desktop 2.0.9.
+- extension: "custom inserts" = link files for small client-side tweaks..
+- extension: "bracketed links" = render links surrounded with \[\[brackets]] instead of underlined.
+- extension: "focus mode" = hide the titlebar/menubar if the sidebar is closed (will be shown on hover).
+- theme: "dark+" = a vivid-colour near-black theme.
+- theme: "neutral" = smoother colours and fonts, designed to be more pleasing to the eye.
+- theme: "gameish" = a purple, "gamer-styled" theme with a blocky-font.
+- theme: "pastel dark" = a smooth-transition true dark theme with a hint of pastel.
+- extension: "emoji sets" = pick from a variety of emoji styles to use.
+- extension: "night shift" = sync dark/light theme with the system (overrides normal theme setting).
+- extension: "right-to-left" = enables auto rtl/ltr text direction detection. (ported from [github.com/obahareth/notion-rtl](https://github.com/obahareth/notion-rtl).)
+- extension: "weekly view" = calendar views named "weekly" will show only the 7 days of this week. (ported from [github.com/adihd/notionweeklyview](https://github.com/adihd/notionweeklyview).)]
+- extension: "property layout" = auto-collapse page properties that usually push down page content. (ported from [github.com/alexander-kazakov/notion-layout-extension](https://github.com/alexander-kazakov/notion-layout-extension).)
+
+> 📥 `npm i -g notion-enhancer@0.8.0`
 
 ### v0.7.0 (2020-07-09)
 
 - new: tray option to use system default emojis (instead of twitter's emojiset).
-- new: mac support (identical functionality to others platforms with the
+- new: mac support (identical functionality to other platforms with the
   exception of the native minimise/maximise/close buttons being kept, as they integrate
   better with the OS while not being out-of-place in notion).
 - new: notion-deb-builder support for linux.
@@ -18,6 +47,8 @@ but can still easily be enabled by following instructions in the [docs](README.m
 - bugfix: odd mix of `\\` and `/` being used for windows filepaths.
 - bugfix: app no longer crashes when sidebar is toggled.
 
+> 📥 [notion-enhancer.v0.7.0.zip](https://github.com/dragonwocky/notion-enhancer/archive/v0.7.0.zip)
+
 ### v0.6.0 (2020-06-30)
 
 - style: custom fonts.
@@ -44,7 +75,10 @@ but can still easily be enabled by following instructions in the [docs](README.m
 
 > 📥 [notion-enhancer.v0.5.0.zip](https://github.com/dragonwocky/notion-enhancer/archive/v0.5.0.zip)
 
-_(forked by [@dragonwocky](https://github.com/dragonwocky).)_
+**development here taken over by [@dragonwocky](https://github.com/dragonwocky).**
+
+**the ~~crossed out~~ features below are no longer features included by default,**
+**but can still easily be added as [custom tweaks](TWEAKS.md).**
 
 ### v0.4.1 (2020-02-13)
 

CONTRIBUTING.md

@@ -0,0 +1,99 @@
+# contributing
+
+the enhancer is a tool for the community, so who best to build it but the community?
+
+these guidelines are designed for smooth communication, management and development on this project.
+following them shows respect to the developer/s spending their free time on it, and makes it easiest for them to improve the tool.
+
+**found a bug / something isn't working as expected?** create a
+[bug report](https://github.com/dragonwocky/notion-enhancer/issues/new?labels=bug&template=bug-report.md).
+
+> SECURITY ISSUE? (e.g. PERSONAL/NOTION DATA BEING INTERFERED WITH)
+> EMAIL ME INSTEAD: [thedragonring.bod@gmail.com](mailto:thedragonring.bod@gmail.com)
+
+**have a cool new feature idea / there's something you just wish you could do?** submit a
+[feature request](https://github.com/dragonwocky/notion-enhancer/issues/new?labels=enhancement&template=feature-request.md).
+
+> enhancements are applied only locally -
+> features should be designed only to improve the user experience.
+
+**know your way around notion/electron/js/css and have some code to contribute?** great! read below for guidelines
+on how to create a helpful pull request and what happens with your code afterwards. it's probably also helpful to
+join the [discord server](https://discord.gg/sFWPXtA).
+
+**for information on how to actually create a theme or module with the notion-enhancer api, check the [docs](DOCUMENTATION.md).**
+
+## testing
+
+download:
+
+```sh
+git clone https://github.com/dragonwocky/notion-enhancer
+cd notion-enhancer
+git checkout js
+npm link
+```
+
+the downloaded folder is now directly linked to the `notion-enhancer` command.
+
+no written tests are included with the enhancer:
+i don't have the experience/skill with them yet to use them effectively.
+if you can add some for your code, though, go ahead!
+
+## conventions
+
+the enhancer can be categorised as a **core** extended by included **modules**.
+the core can be further split into the **installer** and the **modloader**.
+modules are either **extensions** or **themes**.
+
+each module is separately versioned, following the [semver](https://semver.org/) scheme.
+depending on the content and scale of a contribution, it may constitute an update on its own or may be merged into a larger update.
+
+to keep a consistent informative code style it is preferred to name variables with
+`snake_case`, functions/methods with `camelCase`, and classes with `PascalCase`.
+if a variable is a reference to a DOM element, it may be helpful to prefix it with a `$`.
+
+## review
+
+active core devs will manually look through each pull request and communicate with contributors before merging to
+make sure it is:
+
+**a) safe.** system details (e.g. IP, clipboard) + notion user data are considered private unless directly shared by the user.
+none of this should be accessed or transmitted to an external server.
+
+**b) functional.** is there a better way to do this? can extra dependencies be removed or replaced by newer web technologies?
+how can this be made as user-friendly as possible?
+
+**c) bug-free.** where possible, code should be tested on a variety of platforms in a variety of situations so it can be
+confirmed that it won't break anything for the user and is robust enough to handle use by both
+power users and non-tech-savvy users.
+
+## translating
+
+future versions of the enhancer will have multi-language support.
+
+if you are willing to help with translation, let me know and i'll contact you when i'm ready.
+
+## licensing
+
+this project is distributed under the [MIT](https://choosealicense.com/licenses/mit/) license.
+the project as a whole is copyrighted by core devs in the [LICENSE](LICENSE) file.
+
+when modifying a file, add your copyright to it in the format:
+
+```
+/*
+ * module or project name
+ * (c) year name <email> (website)
+ * under the MIT license
+ */
+```
+
+all code contributed to this repository remains attributed to the contributor,
+but full rights are granted for it to be used under the terms of the MIT license.
+on the occasion that the contributed code should be removed or overwritten,
+the contributor's copyright may be removed from the file.
+
+by opening a pull request in this repository, you agree to the above conditions.
+
+dependencies remain separately licensed to their various authors.

DOCUMENTATION.md

@@ -0,0 +1,193 @@
+# documentation
+
+the enhancer is essentially a modloader for notion. this document contains the specifications of
+how those modules can be made and what they should contain.
+
+this file assumes basic working knowledge of modern javascript and css. since these are the languages
+executable within the notion app, these are the languages enhancements must be written in.
+
+want to contribute? check the [contribution guidelines](CONTRIBUTING.md).
+
+for support, join the [discord server](https://discord.gg/sFWPXtA).
+
+## creating a mod
+
+_to understand best how notion's app works, check out [the electron docs](https://www.electronjs.org/docs/),_
+_explore the contents of your local extracted `app.asar`, and navigate the html structure with the devtools web inspector._
+
+_look through [the existing modules](https://github.com/dragonwocky/notion-enhancer/tree/js/mods/)_
+_for examples of the stuff described below in action._
+
+_at the moment, for ease of development and use (and security assurance), there's no way for users_
+_to install their own modules. this means that testing modules requires_
+_[running a dev build of the enhancer](DOCUMENTATION.md#testing). a better system is in the works._
+
+_once your mod is working, open a pull request to add it to the enhancer!_
+
+each directory in the `mods` folder is considered a module, with the file entry points `mod.js` and `styles.css`.
+
+| file         | description                                                           |
+| ------------ | --------------------------------------------------------------------- |
+| `mod.js`     | **required:** describes the module and contains functional javascript |
+| `styles.css` | **optional:** a css file automatically inserted into each app window  |
+
+## mod.js
+
+```js
+// not valid js!
+// a visual representation of the contents/type
+// of this file's exported object.
+module.exports = {
+  id: String of uuidv4,
+  name: String of short_name,
+  tags?: Array<String> of categories,
+  desc: String of markdown,
+  version: String of semver,
+  author: String of github_username OR {
+    name: String of author_name,
+    link: String of url,
+    avatar: String of image_source,
+  },
+  options?: Array<{
+    key: String,
+    label: String,
+    type: String in ['toggle', 'select', 'input', 'file'],
+    value: Boolean or Array<String> or String or Number or null
+  }>,
+  hacks?: {
+    [k: 'insert-point' (e.g. 'main/createWindow.js')]: function (
+      store, // used for configuration and persisting of data (explanation below).
+      __exports // module.exports of the target file. if you don't understand that, don't use it.
+    ) {}
+  }
+};
+```
+
+| key     | value                                                                                           | type                   |
+| ------- | ----------------------------------------------------------------------------------------------- | ---------------------- |
+| id      | **required:** uuidv4 - generate a new one [here](https://www.uuidgenerator.net)                 | _string_               |
+| name    | **required:** short name (e.g. `'ocean theme'`)                                                 | _string_               |
+| tags    | **required:** categories/type (e.g. `'extension'`, `'theme'`, `'light'`, `'dark'`)              | _array\<string\>_      |
+| desc    | **optional:** 1-3 sentence description of what the module is/does, with basic markdown support. | _string_               |
+| version | **required:** semver (e.g. `'0.3.7'`)                                                           | _string_               |
+| author  | **required:** see below: original extension creator                                             | _string_ or \<object\> |
+| options | **optional:** see below: options made available in the enhancer menu (accessible from the tray) | _array\<object\>_      |
+| hacks   | **optional:** see below: code inserted at various points                                        | _object_               |
+
+> a module that with the primary function of being a hack should be tagged as an extension,
+> while a module that has the primary function of adding styles should be tagged as a theme.
+
+#### author
+
+by default this is assumed to be a github username: just pass it as a string and
+the link/avatar will be automatically found.
+
+if you'd rather customise this, pass this object:
+
+| key    | value                                      | type     |
+| ------ | ------------------------------------------ | -------- |
+| name   | **required:** author's (your?) name        | _string_ |
+| link   | **required:** link to the author's profile | _string_ |
+| avatar | **required:** url for the author's avatar  | _string_ |
+
+#### options
+
+| key        | value                                                                                    | type              |
+| ---------- | ---------------------------------------------------------------------------------------- | ----------------- |
+| key        | **required:** key to save value to the mod `store`                                       | _string_          |
+| label      | **required:** short description/name of option to be shown in menu                       | _string_          |
+| type       | **required:** input type (see below)                                                     | _string_          |
+| extensions | **optional:** allowed file extensions (only use with a file option), e.g. `['js', 'ts']` | _array\<string\>_ |
+| value      | **optional:** default or possible value/s for option                                     | see below         |
+
+| type   | value                |
+| ------ | -------------------- |
+| toggle | _boolean_            |
+| select | _array\<string\>_    |
+| input  | _string_ or _number_ |
+| color  | _string_             |
+| file   | none                 |
+
+> the file option stores only a filepath, not the file itself.
+
+## hacks
+
+each "hack" is a function taking 2 arguments.
+
+1. the **`store`** argument, which allows access to the module settings/options defined in `mod.js`
+   (those set in the menu, or used internally by the module). each module store is automatically saved to +
+   loaded from `~/.notion-enhancer/id.json`.
+   it should always be called as `store({ defaults })` (not stored in a variable),
+   but otherwise treated as a normal object to access and set things.
+2. the **`__exports`** argument, which is the `module.exports` of the file being modded.
+   this can be used to call or replace functions from notion.
+
+this hack is applied to whichever file (`.js`-only) is set as the function key. these can be found within the `app` folder.
+
+files under the `main` folder are executed on app launch in a process shared
+between all app windows (consider it a backend). files under the `renderer` folder are
+executed on window launch in a pre-window process: the client-side javascript
+normally expected to run on a webpage.
+
+unless scripts need to change app logic (e.g. to add the tray menu),
+they should usually be applied to `renderer/preload.js` to interact
+with the app window itself.
+
+e.g.
+
+```js
+// sayhi.js
+module.exports = function (store, __exports) {
+  document.addEventListener('readystatechange', (event) => {
+    if (document.readyState !== 'complete') return false;
+    console.log(store({ name: 'dragonwocky' }).name);
+  });
+};
+// mod.js
+module.exports.hacks = {
+  'renderer/preload.js': require('./sayhi.js'),
+};
+```
+
+### the `enhancement://` protocol
+
+any files within the `mods` folder can be loaded with the `enhancement://` protocol.
+
+for example, inserting an image from the core mod: `<img src="enhancement://core/image.png">`.
+
+## styles.css
+
+the enhancer has been designed with theming in mind, so as much of notion's colours
+and typography as possible and some basic spacing (both for the light and dark themes) have been mapped out
+using css variables.
+
+this set of variables is 100% mandatory to use if you wish to use or change anything they handle
+(particularly colours). this is necessary to keep all themes consistently working
+(e.g. styling the menu and responding properly to light/dark theme changes),
+and it makes theming a lot easier - notion's html structure needs some complex selectors to properly modify it,
+and it means theme authors don't have to worry separately updating their theme every time something changes.
+
+the full/up-to-date list of variables and their default values can be found in the
+[`variables.css` file](mods/core/css/variables.css). each variable is named something along the lines of
+`--theme_mode--target_name-property`. still not sure what a variable does? try changing it and seeing what happens.
+
+these are all made possible by the core module. if you believe this set of variables is buggy or lacking in any way,
+consider opening a pull request to fix those issues - please do not try and reinvent the wheel unnecessarily.
+
+### using variables
+
+variables should be used without specifying which mode they are relevant to. for example:
+
+```css
+:root {
+  --theme_dark--main: rgb(5, 5, 5);
+}
+
+.demo-element {
+  background: var(--theme--main);
+}
+```
+
+this to simplify styling and make it possible for things like the "night shift" module to work,
+by leaving the choice of light/dark theme up to the user and then directing the right values to
+the relevant variables.

Pipfile

@@ -1,14 +0,0 @@
-[[source]]
-name = "pypi"
-url = "https://pypi.org/simple"
-verify_ssl = true
-
-[dev-packages]
-pylint = "*"
-autopep8 = "*"
-
-[packages]
-pyasar = "*"
-
-[requires]
-python_version = "3.6"

Pipfile.lock

@@ -1,150 +0,0 @@
-{
-    "_meta": {
-        "hash": {
-            "sha256": "1acd8226b318eb2516f81421b7f90e7c81f2119805d658a5a958e0699a1358d6"
-        },
-        "pipfile-spec": 6,
-        "requires": {
-            "python_version": "3.6"
-        },
-        "sources": [
-            {
-                "name": "pypi",
-                "url": "https://pypi.org/simple",
-                "verify_ssl": true
-            }
-        ]
-    },
-    "default": {
-        "pyasar": {
-            "hashes": [
-                "sha256:f96b322ea5c450d129dbe6990e5ba827d1d070e818822c408abffa44058f7f08"
-            ],
-            "index": "pypi",
-            "version": "==1.0.8"
-        }
-    },
-    "develop": {
-        "astroid": {
-            "hashes": [
-                "sha256:2f4078c2a41bf377eea06d71c9d2ba4eb8f6b1af2135bec27bbbb7d8f12bb703",
-                "sha256:bc58d83eb610252fd8de6363e39d4f1d0619c894b0ed24603b881c02e64c7386"
-            ],
-            "markers": "python_version >= '3.5'",
-            "version": "==2.4.2"
-        },
-        "autopep8": {
-            "hashes": [
-                "sha256:60fd8c4341bab59963dafd5d2a566e94f547e660b9b396f772afe67d8481dbf0"
-            ],
-            "index": "pypi",
-            "version": "==1.5.3"
-        },
-        "isort": {
-            "hashes": [
-                "sha256:54da7e92468955c4fceacd0c86bd0ec997b0e1ee80d97f67c35a78b719dccab1",
-                "sha256:6e811fcb295968434526407adb8796944f1988c5b65e8139058f2014cbe100fd"
-            ],
-            "markers": "python_version >= '2.7' and python_version not in '3.0, 3.1, 3.2, 3.3'",
-            "version": "==4.3.21"
-        },
-        "lazy-object-proxy": {
-            "hashes": [
-                "sha256:0c4b206227a8097f05c4dbdd323c50edf81f15db3b8dc064d08c62d37e1a504d",
-                "sha256:194d092e6f246b906e8f70884e620e459fc54db3259e60cf69a4d66c3fda3449",
-                "sha256:1be7e4c9f96948003609aa6c974ae59830a6baecc5376c25c92d7d697e684c08",
-                "sha256:4677f594e474c91da97f489fea5b7daa17b5517190899cf213697e48d3902f5a",
-                "sha256:48dab84ebd4831077b150572aec802f303117c8cc5c871e182447281ebf3ac50",
-                "sha256:5541cada25cd173702dbd99f8e22434105456314462326f06dba3e180f203dfd",
-                "sha256:59f79fef100b09564bc2df42ea2d8d21a64fdcda64979c0fa3db7bdaabaf6239",
-                "sha256:8d859b89baf8ef7f8bc6b00aa20316483d67f0b1cbf422f5b4dc56701c8f2ffb",
-                "sha256:9254f4358b9b541e3441b007a0ea0764b9d056afdeafc1a5569eee1cc6c1b9ea",
-                "sha256:9651375199045a358eb6741df3e02a651e0330be090b3bc79f6d0de31a80ec3e",
-                "sha256:97bb5884f6f1cdce0099f86b907aa41c970c3c672ac8b9c8352789e103cf3156",
-                "sha256:9b15f3f4c0f35727d3a0fba4b770b3c4ebbb1fa907dbcc046a1d2799f3edd142",
-                "sha256:a2238e9d1bb71a56cd710611a1614d1194dc10a175c1e08d75e1a7bcc250d442",
-                "sha256:a6ae12d08c0bf9909ce12385803a543bfe99b95fe01e752536a60af2b7797c62",
-                "sha256:ca0a928a3ddbc5725be2dd1cf895ec0a254798915fb3a36af0964a0a4149e3db",
-                "sha256:cb2c7c57005a6804ab66f106ceb8482da55f5314b7fcb06551db1edae4ad1531",
-                "sha256:d74bb8693bf9cf75ac3b47a54d716bbb1a92648d5f781fc799347cfc95952383",
-                "sha256:d945239a5639b3ff35b70a88c5f2f491913eb94871780ebfabb2568bd58afc5a",
-                "sha256:eba7011090323c1dadf18b3b689845fd96a61ba0a1dfbd7f24b921398affc357",
-                "sha256:efa1909120ce98bbb3777e8b6f92237f5d5c8ea6758efea36a473e1d38f7d3e4",
-                "sha256:f3900e8a5de27447acbf900b4750b0ddfd7ec1ea7fbaf11dfa911141bc522af0"
-            ],
-            "markers": "python_version >= '2.7' and python_version not in '3.0, 3.1, 3.2, 3.3'",
-            "version": "==1.4.3"
-        },
-        "mccabe": {
-            "hashes": [
-                "sha256:ab8a6258860da4b6677da4bd2fe5dc2c659cff31b3ee4f7f5d64e79735b80d42",
-                "sha256:dd8d182285a0fe56bace7f45b5e7d1a6ebcbf524e8f3bd87eb0f125271b8831f"
-            ],
-            "version": "==0.6.1"
-        },
-        "pycodestyle": {
-            "hashes": [
-                "sha256:2295e7b2f6b5bd100585ebcb1f616591b652db8a741695b3d8f5d28bdc934367",
-                "sha256:c58a7d2815e0e8d7972bf1803331fb0152f867bd89adf8a01dfd55085434192e"
-            ],
-            "markers": "python_version >= '2.7' and python_version not in '3.0, 3.1, 3.2, 3.3'",
-            "version": "==2.6.0"
-        },
-        "pylint": {
-            "hashes": [
-                "sha256:7dd78437f2d8d019717dbf287772d0b2dbdfd13fc016aa7faa08d67bccc46adc",
-                "sha256:d0ece7d223fe422088b0e8f13fa0a1e8eb745ebffcb8ed53d3e95394b6101a1c"
-            ],
-            "index": "pypi",
-            "version": "==2.5.3"
-        },
-        "six": {
-            "hashes": [
-                "sha256:30639c035cdb23534cd4aa2dd52c3bf48f06e5f4a941509c8bafd8ce11080259",
-                "sha256:8b74bedcbbbaca38ff6d7491d76f2b06b3592611af620f8426e82dddb04a5ced"
-            ],
-            "markers": "python_version >= '2.7' and python_version not in '3.0, 3.1, 3.2, 3.3'",
-            "version": "==1.15.0"
-        },
-        "toml": {
-            "hashes": [
-                "sha256:926b612be1e5ce0634a2ca03470f95169cf16f939018233a670519cb4ac58b0f",
-                "sha256:bda89d5935c2eac546d648028b9901107a595863cb36bae0c73ac804a9b4ce88"
-            ],
-            "version": "==0.10.1"
-        },
-        "typed-ast": {
-            "hashes": [
-                "sha256:0666aa36131496aed8f7be0410ff974562ab7eeac11ef351def9ea6fa28f6355",
-                "sha256:0c2c07682d61a629b68433afb159376e24e5b2fd4641d35424e462169c0a7919",
-                "sha256:249862707802d40f7f29f6e1aad8d84b5aa9e44552d2cc17384b209f091276aa",
-                "sha256:24995c843eb0ad11a4527b026b4dde3da70e1f2d8806c99b7b4a7cf491612652",
-                "sha256:269151951236b0f9a6f04015a9004084a5ab0d5f19b57de779f908621e7d8b75",
-                "sha256:4083861b0aa07990b619bd7ddc365eb7fa4b817e99cf5f8d9cf21a42780f6e01",
-                "sha256:498b0f36cc7054c1fead3d7fc59d2150f4d5c6c56ba7fb150c013fbc683a8d2d",
-                "sha256:4e3e5da80ccbebfff202a67bf900d081906c358ccc3d5e3c8aea42fdfdfd51c1",
-                "sha256:6daac9731f172c2a22ade6ed0c00197ee7cc1221aa84cfdf9c31defeb059a907",
-                "sha256:715ff2f2df46121071622063fc7543d9b1fd19ebfc4f5c8895af64a77a8c852c",
-                "sha256:73d785a950fc82dd2a25897d525d003f6378d1cb23ab305578394694202a58c3",
-                "sha256:8c8aaad94455178e3187ab22c8b01a3837f8ee50e09cf31f1ba129eb293ec30b",
-                "sha256:8ce678dbaf790dbdb3eba24056d5364fb45944f33553dd5869b7580cdbb83614",
-                "sha256:aaee9905aee35ba5905cfb3c62f3e83b3bec7b39413f0a7f19be4e547ea01ebb",
-                "sha256:bcd3b13b56ea479b3650b82cabd6b5343a625b0ced5429e4ccad28a8973f301b",
-                "sha256:c9e348e02e4d2b4a8b2eedb48210430658df6951fa484e59de33ff773fbd4b41",
-                "sha256:d205b1b46085271b4e15f670058ce182bd1199e56b317bf2ec004b6a44f911f6",
-                "sha256:d43943ef777f9a1c42bf4e552ba23ac77a6351de620aa9acf64ad54933ad4d34",
-                "sha256:d5d33e9e7af3b34a40dc05f498939f0ebf187f07c385fd58d591c533ad8562fe",
-                "sha256:fc0fea399acb12edbf8a628ba8d2312f583bdbdb3335635db062fa98cf71fca4",
-                "sha256:fe460b922ec15dd205595c9b5b99e2f056fd98ae8f9f56b888e7a17dc2b757e7"
-            ],
-            "markers": "python_version < '3.8' and implementation_name == 'cpython'",
-            "version": "==1.4.1"
-        },
-        "wrapt": {
-            "hashes": [
-                "sha256:b62ffa81fb85f4332a4f609cab4ac40709470da05643a082ec1eb88e6d9b97d7"
-            ],
-            "version": "==1.12.1"
-        }
-    }
-}

README.md

@@ -1,140 +1,258 @@
-# notion enhancer
+# <img src="./mods/core/icons/mac+linux.png" height="20px"></img> notion-enhancer
 
-an enhancer/customiser for the all-in-one productivity workspace [notion.so](https://www.notion.so/)
+ended up here? this is a work-in-progress version of the enhancer, not ready for public use.
+if you're interested in using the project, switch back to the [master branch](https://github.com/dragonwocky/notion-enhancer).
 
-## supported clients
+notion.so is a pretty awesome tool already, but there's always room for improvements.
+it might just be a preference, it might be something crucial to your setup,
+it might be something users have been asking for for a long time,
+or it might even be something you haven't realised you need yet
+\- there's something that would make your user experience a lot better.
 
-there are a lot of ways to use notion. some official clients, many not.
+this package is a mod-loader for the desktop app, with custom colour theming and extra feature enhancements.
 
-the enhancer supports:
+want to contribute? check out the [contribution guidelines](CONTRIBUTING.md) and the [documentation](DOCUMENTATION.md).
-
-- the [official windows/mac releases](https://notion.so/desktop).
-- the arch linux AUR [notion-app](https://aur.archlinux.org/packages/notion-app/) package
-- the linux [notion-app](https://github.com/jaredallard/notion-app) installer
-- the debian [notion-deb-builder](https://github.com/davidbailey00/notion-deb-builder/tree/229f2868e117e81858618783b83babd00c595000).
-
-there are others, yes. the enhancer does not support them. you should not expect them to work.
-if for some reason you need to use one of them instead of the above listed ones, open a
-[platform support](https://github.com/dragonwocky/notion-enhancer/issues/new?assignees=&labels=enhancement&template=platform-support.md&title=) request.
-
-please do not modify the enhancer code specifically to work for your installation.
-if you have the know-how to do so, instead open a pull request with your changes
-so that proper support can be added for all users of that client.
-
-mobile clients are not supported and due to system limitations/restrictions cannot be.
-
-(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)
-or a built-in feature like [userChrome.css](https://www.userchrome.org/).)
-
-if the script is run from the WSL, it will enhance the windows version of the app.
 
 ## installation
 
+**coming from <= v0.7.0? things are a bit different - have a read of [the update guide](UPDATING.md)**
+**before following these instructions.**
+
 1. install node.js: [windows/macOS](https://nodejs.org/en/download/), [linux/WSL](https://github.com/mklement0/n-install).
-2. install python: [windows/macOS](https://www.python.org/downloads/), [linux/WSL](https://docs.python-guide.org/starting/install3/linux/).
+   _a computer restart may be required here._
-3. reboot.
+2. install the enhancer globally: run `npm i -g notion-enhancer` in the terminal/command prompt.
-4. in the appropriate terminal/command line, run `npm install -g asar` (check installation by running `asar`).
+3. make sure no notion processes are running (check the task manager!), and apply the hack:
-5. [download this enhancer](https://github.com/dragonwocky/notion-enhancer/archive/master.zip) & extract
+   run `notion-enhancer apply` in the terminal/command prompt.
-   to a location it can safely remain (if running the script from the WSL, make sure this is from a location within the windows filesystem).
-6. ensure no notion processes are running - you may want to check the task manager to make sure.
-7. optional: to remove previous applications of the notion enhancer, run `cleaner.py`.
-8. optional: modify the `resources/user.css` file to your liking (see [styling](#styling)).
-9. run `customiser.py` to build changes. (for linux run with sudo)
 
-done: run notion and enjoy.
+### command-line interface
 
-## faq
+```
+Usage:
+  $ notion-enhancer <command> [options]
 
-**now the notion app won't open :(**
+Commands:
+  apply   : add enhancements to the notion app
+  remove  : return notion to its pre-enhanced/pre-modded state
+  check   : check the current state of the notion app
 
-1. kill any notion tasks in the task manager (`ctrl+shift+esc`).
+For more info, run any command with the `--help` flag:
-2. run `cleaner.py`.
+  $ notion-enhancer apply --help
-3. reboot.
+  $ notion-enhancer remove --help
-4. follow instructions above (ensuring notion _isn't_ running! again, check task manager).
+  $ notion-enhancer check --help
 
-**i tried opening the python file but it just closed instantly and nothing happened?**
+Options:
+  -y, --yes      : skip prompts (may overwrite data)
+  -h, --help     : display usage information
+  -v, --version  : display version number
+```
 
-python scripts must be run from the terminal or command prompt via e.g. `python customiser.py`.
+### supported clients
 
-**now that I've run the script, can I delete the enhancer folder?**
+- the [official windows/mac releases](https://notion.so/desktop).
+- the arch linux AUR [notion-app](https://aur.archlinux.org/packages/notion-app/) package.
+- the linux [notion-app](https://github.com/jaredallard/notion-app) installer.
+- the debian [notion-deb-builder](https://github.com/davidbailey00/notion-deb-builder/).
 
-no! user style files `resources/user.css` and `resources/theme.css` are fetched from here each time you open notion.
+(it can also be run from the wsl to apply enhancements to the windows app.)
-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.
+**using a not-yet-supported operating system or notion installation?** ask for
+[platform support](https://github.com/dragonwocky/notion-enhancer/issues/new?labels=enhancement&template=platform-support.md).
 
-**something isn't working, and the suggestions here haven't fixed it...**
+mobile clients are not supported and due to system limitations/restrictions cannot be.
 
-this is probably a bug. please submit a
+a chrome extension may be coming soon for web client support.
-[bug report](https://github.com/dragonwocky/notion-enhancer/issues/new?assignees=&labels=bug&template=bug-report.md&title=).
 
-**can the enhancer do \_\_\_?**
+**is this against notion's terms of service? can i get in trouble for using it?**
 
-experienced problems with the notion app, or just want to add something a bit more to it? please submit a
+definitely not! i contacted their support team to check, and the response was awesome:
-[feature request](https://github.com/dragonwocky/notion-enhancer/issues/new?assignees=&labels=enhancement&template=feature-request.md&title=).
+
+"Thanks for taking the time to share this with us. Userscripts and userstyles are definitely
+cool ideas and would be helpful for many users! ... I'll also share this with the rest of the
+team to take to heart for future improvements."
 
 ## features
 
-### titlebar
+once applied, modules can be configured via the graphical menu, which is opened from
+the tray/menubar icon or with `CMD/CTRL+E`.
 
-default windows titlebar/frame has been replaced by one more fitting to the theme of the app.
+currently all modules come pre-installed for technical reasons, security assurance, and ease-of-use.
+these include:
 
-this includes the addition of an extra button, "always on top"
+### notion-enhancer core
-symbolised with an arrow. when toggled to point up,
-notion will remain the top visible window even if not focused.
 
-### nicer scrollbars
+**tags:** #core
 
-i mean, yeah. get rid of those ugly default scrollbars and use nice inconspicuous
+**description:** the cli, modloader, menu, & tray.
-ones that actually look as if they're part of notion.
 
-to add these to the web version, copy lines 74 - 105 from `user.css` into your css customiser.
+**author**: [dragonwocky](https://github.com/dragonwocky/)
 
-![](screenshots/app-unenhanced.jpg)
+**version**: v0.8.0
-_image: before enhancement_
 
-![](screenshots/app-enhanced.jpg)
+| option                       | type                                                                                          | default                    |
-_image: after default enhancement_
+| ---------------------------- | --------------------------------------------------------------------------------------------- | -------------------------- |
+| hide app on open             | toggle                                                                                        | no                         |
+| auto-maximise windows        | toggle                                                                                        | no                         |
+| close window to the tray     | toggle                                                                                        | yes                        |
+| integrated titlebar          | toggle                                                                                        | yes                        |
+| height of frameless dragarea | number input                                                                                  | `15`                       |
+| integrated scrollbars        | toggle                                                                                        | yes                        |
+| window display hotkey        | [accelerator](https://github.com/electron/electron/blob/master/docs/api/accelerator.md) input | `CommandOrControl+Shift+A` |
 
-### hotkeys
+![](https://user-images.githubusercontent.com/16874139/90519171-094e3900-e1ab-11ea-8c5d-529ca15c6d95.png)
 
-- **reload window**: in addition to the built-in `CmdOrCtrl+R` reload,
+### custom inserts
-  you can now reload a window with `F5`.
-- **toggle all notion windows to/from the tray**: `CmdOrCtrl+Shift+A` by default.
 
-to set your own toggle hotkey, open `customiser.py` and change line 19 (`hotkey = 'CmdOrCtrl+Shift+A'`)
+**tags:** #extension
-to your preference. you will need to run or re-run `customiser.py` afterwards.
 
-### tray
+**description:** link files for small client-side tweaks.
 
-single-click to toggle app visibility. right click to open menu.
+**author**: [dragonwocky](https://github.com/dragonwocky/)
 
-- **run on startup**: run notion on boot/startup. (default: true)
+**version**: v0.1.1
-- **hide on open**: hide the launch of notion to the tray. (default: false)
-- **open maximised**: maximize the app on open. (default: false)
-- **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)
-- **load theme.css**: loads the custom colour theme file.
-  see [colour theming](STYLING.md#colour-theming) for more information. (default: false)
-- **use system emoji**: reverts notion to using normal emojis, rather than the twitter emojiset. (default: false)
 
-![](screenshots/app-tray.jpg)
+| option                | type | default |
+| --------------------- | ---- | ------- |
+| css insert            | file | none    |
+| client-side js insert | file | none    |
 
-_image: open application tray_
+### bracketed links
 
-## styling
+**tags:** #extension
 
-custom appearances can be applied to the app via the `resources/user.css` and `resources/theme.css` files. for more information,
+**description:** render links surrounded with \[\[brackets]] instead of underlined.
-and a list of various optional styling changes, see [the page on styling](STYLING.md).
 
-## other details
+**author**: [arecsu](https://github.com/arecsu/)
 
-credit where credit is due, this was originally made by Uzver (github: [@TarasokUA](https://github.com/TarasokUA),
+**version**: v0.1.0
-telegram: [UserFromUkraine](https://t.me/UserFromUkraine), discord: Uzver#8760).
-he has approved my go-ahead with this fork, as he himself no longer wishes to continue development on the project.
 
-the notion logo belongs entirely to the notion team, and was sourced from their
+### dark+
-[media kit](https://www.notion.so/Media-Kit-205535b1d9c4440497a3d7a2ac096286).
 
-if you have any questions, check [my website](https://dragonwocky.me/) for contact details.
+**tags:** #theme #dark
+
+**description:** a vivid-colour near-black theme.
+
+**author:** [dragonwocky](https://github.com/dragonwocky/)
+
+**version:** v0.1.3
+
+| option         | type  | default            |
+| -------------- | ----- | ------------------ |
+| primary colour | color | `rgb(177, 24, 24)` |
+
+![](https://user-images.githubusercontent.com/16874139/90520312-85954c00-e1ac-11ea-8c45-3894c13b9b71.png)
+
+### emoji sets
+
+**tags:** #extension
+
+**description:** pick from a variety of emoji styles to use.
+
+**author:** [dragonwocky](https://github.com/dragonwocky/)
+
+**version:** v0.1.3
+
+![](https://user-images.githubusercontent.com/16874139/90520622-f0df1e00-e1ac-11ea-8791-12922a037234.png)
+
+### focus mode
+
+**tags:** #extension
+
+**description:** hide the titlebar/menubar if the sidebar is closed (will be shown on hover).
+
+**author:** [arecsu](https://github.com/arecsu/)
+
+**version:** v0.1.0
+
+![](https://user-images.githubusercontent.com/16874139/90521792-49fb8180-e1ae-11ea-8764-cb4309cec464.png)
+
+### gameish
+
+**tags:** #theme #dark
+
+**description:** a purple, "gamer-styled" theme with a blocky-font.
+
+**author:** [LVL100ShrekCultist](https://reddit.com/user/LVL100ShrekCultist/)
+
+**version:** v0.1.1
+
+![](https://user-images.githubusercontent.com/16874139/90522144-b6768080-e1ae-11ea-8150-527c1f70f0e7.png)
+
+### neutral
+
+**tags:** #theme #dark
+
+**description:** smoother colours and fonts, designed to be more pleasing to the eye.
+
+**author:** [arecsu](https://github.com/arecsu/)
+
+**version:** v0.1.0
+
+![](https://user-images.githubusercontent.com/16874139/90522373-f9d0ef00-e1ae-11ea-9dba-b29431609210.png)
+
+### night shift
+
+**tags:** #extension #theme
+
+**description:** sync dark/light theme with the system (overrides normal theme setting).
+
+**author:** [dragonwocky](https://github.com/dragonwocky/)
+
+**version:** v0.1.0
+
+### pastel dark
+
+**tags:** #theme #dark
+
+**description:** a true dark theme with a hint of pastel.
+
+**author:** [zenith_illinois](https://reddit.com/user/zenith_illinois/)
+
+**version:** v0.1.0
+
+![](https://user-images.githubusercontent.com/16874139/90522660-5502e180-e1af-11ea-8885-073ad20d65b3.png)
+
+### property layout
+
+**tags:** #extension
+
+**description:** auto-collapse page properties that usually push down page content.
+
+**author:** [alexander-kazakov](https://github.com/alexander-kazakov/)
+
+**version:** v0.2.1
+
+### right-to-left
+
+**tags:** #extension
+
+**description:** enables auto rtl/ltr text direction detection.
+
+**author:** [obahareth](https://github.com/obahareth/)
+
+**version:** v1.3.0
+
+![](https://user-images.githubusercontent.com/16874139/90522872-95faf600-e1af-11ea-807c-11ac1591217e.png)
+
+### weekly view
+
+**tags:** #extension
+
+**description:** calendar views named "weekly" will show only the 7 days of this week.
+
+**author:** [adihd](https://github.com/adihd/)
+
+**version:** v0.5.0
+
+![](https://user-images.githubusercontent.com/16874139/90523679-86c87800-e1b0-11ea-8cc0-25f6825c6d49.png)
+
+## contributors
+
+[@TarasokUA](https://github.com/TarasokUA/) wrote the first versions of this in python, in early 2020.
+a couple months after I ([@dragonwocky](https://github.com/dragonwocky/)) picked the project up, at first extending
+upon the original base and later moving to the javascript module system.
+
+since then, various community members have helped out heaps - some listed as
+[contributors](https://github.com/dragonwocky/notion-enhancer/graphs/contributors) here on github,
+but many helping with code, feedback and testing on discord and in emails.
+
+individual modules have their original authors attributed.

STYLING.md

@@ -1,333 +0,0 @@
-# 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']`.
-
-## general/app-wide
-
-![](screenshots/app-enhanced.jpg)
-
-_image: the default post-customisation appearance_
-
-### 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.
-
-![](screenshots/theme-dark+.jpg)
-
-_image: the dark+ theme_
-
-### hide discussions (comment threads at the top of each page)
-
-```css
-.notion-page-view-discussion {
-  display: none !important;
-}
-```
-
-![](screenshots/discussion-default.jpg)
-
-_image: before styling_
-
-![](screenshots/discussion-hidden.jpg)
-
-_image: after styling_
-
-### custom fonts
-
-**the `@import` statement must be added to the top of the file (with nothing above it**
-**except comments or other `@import` statements)**
-
-to change the fonts, put the relevant URL in the `@import` statement and then change the [font-family](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) property.
-plenty of other fonts that can be found on google fonts or that may be on your system already.
-
-```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;
-}
-```
-
-![](screenshots/fonts-custom.jpg)
-
-_image: after styling_
-
-### font resizing
-
-**not recommended:** this can mess up container sizes.
-it is suggested to instead use `ctrl+` or `ctrl-` to scale everything up/down.
-
-to change the size, change the value of `--font-scale`.
-
-```css
-:root {
-  --font-scale: 1.4;
-}
-.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;
-}
-```
-
-![](screenshots/fonts-resized.jpg)
-
-_image: after styling_
-
-### wider page preview
-
-```css
-.notion-peek-renderer > div:nth-child(2) {
-  max-width: 85vw !important;
-}
-```
-
-![](screenshots/preview-default.jpg)
-
-_image: before styling_
-
-![](screenshots/preview-wider.jpg)
-
-_image: after styling_
-
-### 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: 12vh !important;
-}
-```
-
-![](screenshots/cover-default.jpg)
-
-_image: before styling_
-
-![](screenshots/cover-thinner.jpg)
-
-_image: after styling_
-
-## tables
-
-![](screenshots/table-before.jpg)
-
-_image: before styling_
-
-### table columns below 100px
-
-**not recommended!** this may cause buggy viewing.
-as it is a per-table-column style, unlike all others here, it must be prepended with the block ID and repeated for each column.
-
-to see how to do this, watch [this video](https://www.youtube.com/watch?v=6V7eqShm_4w).
-
-```css
-[data-block-id^='tableID']
-  > [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(COL_NUMBER)
-  > div:nth-child(1),
-[data-block-id^='tableID']
-  > [style^='position: relative; min-width: calc(100% - 192px);']
-  > [data-block-id]
-  > div:nth-child(COL_NUMBER),
-[data-block-id^='tableID'] > div:nth-child(5) > div:nth-child(COL_NUMBER) {
-  width: 32px !important;
-}
-[data-block-id^='tableID']
-  [style^='position: absolute; top: 0px; left: 0px; pointer-events: none;']:not(.notion-presence-container) {
-  display: none;
-}
-```
-
-![](screenshots/table-columnunder100px.jpg)
-
-_image: after styling_
-
-### hide '+ new' table row
-
-```css
-.notion-table-view-add-row {
-  display: none !important;
-}
-```
-
-![](screenshots/table-hideaddrow.jpg)
-
-_image: after styling_
-
-### hide calculations table row
-
-```css
-.notion-table-view-add-row + div {
-  display: none !important;
-}
-```
-
-![](screenshots/table-hidecalculationsrow.jpg)
-
-_image: after styling_
-
-### centre-align table column headers
-
-```css
-.notion-table-view-header-cell > div > div {
-  margin: 0px auto;
-}
-```
-
-![](screenshots/table-centredheaders.jpg)
-
-_image: after styling_
-
-### 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;
-}
-```
-
-![](screenshots/table-smallercolumnicons.jpg)
-
-_image: after styling_
-
-### remove icons from table column headers
-
-```css
-.notion-table-view-header-cell [style^='margin-right: 6px;'] {
-  display: none !important;
-}
-```
-
-![](screenshots/table-hidecolumnicons.jpg)
-
-_image: after styling_
-
-### 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;
-}
-```
-
-![](screenshots/table-shrinkpadding.jpg)
-
-_image: after styling_
-
-## boards
-
-![](screenshots/board-default.jpg)
-
-_image: before styling_
-
-### 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;
-}
-```
-
-![](screenshots/board-hideaddnew.jpg)
-
-_image: after styling_
-
-### 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;
-}
-```
-
-![](screenshots/board-hidehidden.jpg)
-
-_image: after styling_
-
-### 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;
-}
-```
-
-![](screenshots/board-hideaddgroup.jpg)
-
-_image: after styling_
-
-### removing/decreasing side padding for boards
-
-```css
-.notion-board-view {
-  padding-left: 10px !important;
-  padding-right: 10px !important;
-}
-```
-
-![](screenshots/board-shrinkpadding.jpg)
-
-_image: after styling_

TWEAKS.md

@@ -0,0 +1,200 @@
+# tweaks
+
+the enhancer comes with some built-in colour themes and layout improvements,
+but to get even more control over how the app looks you can use the "custom inserts" module
+to inject your own javascript or css into it.
+
+to make your own css file, make sure that your file manager has "show file extensions" ticked, then
+create a text document and make sure the name ends in `.css` (e.g. `notion-tweaks.css`),
+then use the file picker in the enhancer menu to select it.
+
+this page is a collection of tested visual tweaks users often ask about.
+they should all also work in notion's web client, if copied into a customiser
+like [stylus](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en).
+
+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']`.
+
+if you don't know what css 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).
+
+**the following tweaks were previously on this page and have since been moved to the**
+**more stable and theme-compatible css variable system described in the**
+**[developer documentation](DOCUMENTATION.md#variable-theming):**
+
+- colour theming
+- custom fonts and font sizes
+- wider page preview
+- thinner cover image
+
+if you are attempting to customise the web client, the css previously used for these can be found
+[in the legacy documentation](https://github.com/dragonwocky/notion-enhancer/blob/b5043508d91df76f145f0f48c2c63d7dd1c27543/STYLING.md).
+
+### hide discussions (the comment threads at the top of each page)
+
+```css
+.notion-page-view-discussion {
+  display: none !important;
+}
+```
+
+<img src="https://github.com/dragonwocky/notion-enhancer/blob/b5043508d91df76f145f0f48c2c63d7dd1c27543/screenshots/discussion-default.jpg?raw=true" width="45%"></img> <img src="https://github.com/dragonwocky/notion-enhancer/blob/b5043508d91df76f145f0f48c2c63d7dd1c27543/screenshots/discussion-hidden.jpg?raw=true" width="45%"></img>
+
+### hide the '+ new' gallery button
+
+```css
+.notion-gallery-view
+  .notion-selectable.notion-collection_view-block
+  > [role='button'] {
+  display: none !important;
+}
+```
+
+<img src="https://user-images.githubusercontent.com/16874139/90969951-30f22800-e542-11ea-954c-e36873e19217.png" width="45%"></img> <img src="https://user-images.githubusercontent.com/16874139/90969962-55e69b00-e542-11ea-8ed3-287922805210.png" width="45%"></img>
+
+### table columns below 100px
+
+**not recommended!** this may cause buggy viewing.
+as it is a per-table-column style, unlike all others here, it must be prepended with the block ID and repeated for each column.
+
+to see how to do this, watch [this video](https://www.youtube.com/watch?v=6V7eqShm_4w).
+
+```css
+[data-block-id^='tableID']
+  > [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(COL_NUMBER)
+  > div:nth-child(1),
+[data-block-id^='tableID']
+  > [style^='position: relative; min-width: calc(100% - 192px);']
+  > [data-block-id]
+  > div:nth-child(COL_NUMBER),
+[data-block-id^='tableID'] > div:nth-child(5) > div:nth-child(COL_NUMBER) {
+  width: 32px !important;
+}
+[data-block-id^='tableID']
+  [style^='position: absolute; top: 0px; left: 0px; pointer-events: none;']:not(.notion-presence-container) {
+  display: none;
+}
+```
+
+<img src="https://github.com/dragonwocky/notion-enhancer/blob/b5043508d91df76f145f0f48c2c63d7dd1c27543/screenshots/table-before.jpg?raw=true" width="45%"></img> <img src="https://github.com/dragonwocky/notion-enhancer/blob/b5043508d91df76f145f0f48c2c63d7dd1c27543/screenshots/table-columnunder100px.jpg?raw=true" width="45%"></img>
+
+### hide '+ new' table row
+
+```css
+.notion-table-view-add-row {
+  display: none !important;
+}
+```
+
+<img src="https://github.com/dragonwocky/notion-enhancer/blob/b5043508d91df76f145f0f48c2c63d7dd1c27543/screenshots/table-before.jpg?raw=true" width="45%"></img> <img src="https://github.com/dragonwocky/notion-enhancer/blob/b5043508d91df76f145f0f48c2c63d7dd1c27543/screenshots/table-hideaddrow.jpg?raw=true" width="45%"></img>
+
+### hide calculations table row
+
+```css
+.notion-table-view-add-row + div {
+  display: none !important;
+}
+```
+
+<img src="https://github.com/dragonwocky/notion-enhancer/blob/b5043508d91df76f145f0f48c2c63d7dd1c27543/screenshots/table-before.jpg?raw=true" width="45%"></img> <img src="https://github.com/dragonwocky/notion-enhancer/blob/b5043508d91df76f145f0f48c2c63d7dd1c27543/screenshots/table-hidecalculationsrow.jpg?raw=true" width="45%"></img>
+
+### centre-align table column headers
+
+```css
+.notion-table-view-header-cell > div > div {
+  margin: 0px auto;
+}
+```
+
+<img src="https://github.com/dragonwocky/notion-enhancer/blob/b5043508d91df76f145f0f48c2c63d7dd1c27543/screenshots/table-before.jpg?raw=true" width="45%"></img> <img src="https://github.com/dragonwocky/notion-enhancer/blob/b5043508d91df76f145f0f48c2c63d7dd1c27543/screenshots/table-centredheaders.jpg?raw=true" width="45%"></img>
+
+### 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;
+}
+```
+
+<img src="https://github.com/dragonwocky/notion-enhancer/blob/b5043508d91df76f145f0f48c2c63d7dd1c27543/screenshots/table-before.jpg?raw=true" width="45%"></img> <img src="https://github.com/dragonwocky/notion-enhancer/blob/b5043508d91df76f145f0f48c2c63d7dd1c27543/screenshots/table-smallercolumnicons.jpg?raw=true" width="45%"></img>
+
+### remove icons from table column headers
+
+```css
+.notion-table-view-header-cell [style^='margin-right: 6px;'] {
+  display: none !important;
+}
+```
+
+<img src="https://github.com/dragonwocky/notion-enhancer/blob/b5043508d91df76f145f0f48c2c63d7dd1c27543/screenshots/table-before.jpg?raw=true" width="45%"></img> <img src="https://github.com/dragonwocky/notion-enhancer/blob/b5043508d91df76f145f0f48c2c63d7dd1c27543/screenshots/table-hidecolumnicons.jpg?raw=true" width="45%"></img>
+
+### 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;
+}
+```
+
+<img src="https://github.com/dragonwocky/notion-enhancer/blob/b5043508d91df76f145f0f48c2c63d7dd1c27543/screenshots/table-before.jpg?raw=true" width="45%"></img> <img src="https://github.com/dragonwocky/notion-enhancer/blob/b5043508d91df76f145f0f48c2c63d7dd1c27543/screenshots/table-shrinkpadding.jpg?raw=true" width="45%"></img>
+
+### 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;
+}
+```
+
+<img src="https://github.com/dragonwocky/notion-enhancer/blob/b5043508d91df76f145f0f48c2c63d7dd1c27543/screenshots/board-default.jpg?raw=true" width="45%"></img> <img src="https://github.com/dragonwocky/notion-enhancer/blob/b5043508d91df76f145f0f48c2c63d7dd1c27543/screenshots/board-hideaddnew.jpg?raw=true" width="45%"></img>
+
+### 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;
+}
+```
+
+<img src="https://github.com/dragonwocky/notion-enhancer/blob/b5043508d91df76f145f0f48c2c63d7dd1c27543/screenshots/board-default.jpg?raw=true" width="45%"></img> <img src="https://github.com/dragonwocky/notion-enhancer/blob/b5043508d91df76f145f0f48c2c63d7dd1c27543/screenshots/board-hidehidden.jpg?raw=true" width="45%"></img>
+
+### 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;
+}
+```
+
+<img src="https://github.com/dragonwocky/notion-enhancer/blob/b5043508d91df76f145f0f48c2c63d7dd1c27543/screenshots/board-default.jpg?raw=true" width="45%"></img> <img src="https://github.com/dragonwocky/notion-enhancer/blob/b5043508d91df76f145f0f48c2c63d7dd1c27543/screenshots/board-hideaddgroup.jpg?raw=true" width="45%"></img>
+
+### removing/decreasing side padding for boards
+
+```css
+.notion-board-view {
+  padding-left: 10px !important;
+  padding-right: 10px !important;
+}
+```
+
+<img src="https://github.com/dragonwocky/notion-enhancer/blob/b5043508d91df76f145f0f48c2c63d7dd1c27543/screenshots/board-default.jpg?raw=true" width="45%"></img> <img src="https://github.com/dragonwocky/notion-enhancer/blob/b5043508d91df76f145f0f48c2c63d7dd1c27543/screenshots/board-shrinkpadding.jpg?raw=true" width="45%"></img>

UPDATING.md

@@ -0,0 +1,55 @@
+# updating
+
+the enhancer is still a young project, so it's growing quickly. this means a lot of stuff is changing internally
+\- and, sometimes, externally.
+
+previously (<= v0.7.0), the enhancer was a python script with a couple of resource files, and if you
+wanted to customise things you had to go in and edit those files. in v0.8.0 there has been a complete
+rewrite and overhaul: now this is a program that makes use of a number of modules and a graphical menu.
+
+## installation dependencies
+
+previously, python and the node.js `asar` package were both required.
+node.js is the only current requirement of the enhancer.
+
+- python is no longer a dependency: keep it, get rid of it - up to you.
+- the package installs asar itself in a more scoped environment: if you're confident with
+  the command line, you can remove the package with `npm remove -g asar`. otherwise, it
+  won't do any damage to just leave it.
+
+## keeping the files
+
+enhancement is done fully from the command prompt.
+by default, there are no files for you to worry about.
+
+you can delete the folder the old version of the enhancer is kept in.
+(though you may want to keep the `user.css` file: see below.)
+
+## user.css styling
+
+when you first load the enhancer, there's no single file you can edit to see instant changes.
+instead, the "custom inserts" module is used: you can use it to pick any javascript or css file anywhere
+on your computer and include it every time you load up notion.
+
+to make your own css file, make sure that your file manager has "show file extensions" ticked, then
+create a text document and make sure the name ends in `.css` (e.g. `notion-tweaks.css`). or, just use
+the old `user.css` from before the update.
+
+most of the same css snippets will work, but some (e.g. preview page width) have been moved to the new variable
+system, plus new ones have been found. it's a good idea to check what you have against the [tweaks](TWEAKS.md)
+page and the [css theming documentation](DOCUMENTATION.md#variable-theming).
+
+## configuration
+
+"what happened to the tray options?"
+
+"how can I set a custom window visibility toggle hotkey?"
+
+these options and more have been moved to the graphical menu, which can be opened from the
+tray or with `CMD/CTRL+E` (while the notion app is focused).
+
+## installing
+
+just follow the normal [installation steps](README.md#installation) (starting from step 2, you should
+already have node.js installed). don't worry about running `cleaner.py`, the new version will detect and overwrite
+the old for you.

bin.js

@@ -0,0 +1,69 @@
+#!/usr/bin/env node
+
+/*
+ * notion-enhancer
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://dragonwocky.me/notion-enhancer) under the MIT license
+ */
+
+'use strict';
+
+const cli = require('cac')('notion-enhancer'),
+  { EnhancerError } = require('./pkg/helpers.js');
+
+// === title ===
+//  ...information
+//  * warning
+//  > prompt
+//  -- response
+//  ~~ exit
+// ### error ###
+
+cli.option('-y, --yes', ': skip prompts (may overwrite data)');
+
+cli
+  .command('apply', ': add the enhancer to the notion app')
+  .action(async (options) => {
+    console.info('=== NOTION ENHANCEMENT LOG ===');
+    await require('./pkg/apply.js')();
+    console.info('=== END OF LOG ===');
+  });
+cli
+  .command('remove', ': return notion to its pre-enhanced/pre-modded state')
+  .action(async (options) => {
+    console.info('=== NOTION RESTORATION LOG ===');
+    await require('./pkg/remove.js')(
+      options.yes
+        ? {
+            overwrite_asar: true,
+            delete_data: true,
+          }
+        : {}
+    );
+    console.info('=== END OF LOG ===');
+  });
+cli
+  .command('check', ': check the current state of the notion app')
+  .action(async (options) => {
+    try {
+      console.info((await require('./pkg/check.js')()).msg);
+    } catch (err) {
+      console.error(err instanceof EnhancerError ? err.message : err);
+    }
+  });
+
+let helpCalled = false;
+cli.globalCommand.option('-h, --help', ': display usage information');
+cli.globalCommand.helpCallback = (sections) => {
+  sections[0].body += '\nhttps://github.com/dragonwocky/notion-enhancer';
+  helpCalled = true;
+};
+cli.showHelpOnExit = true;
+
+cli.globalCommand.option('-v, --version', ': display version number');
+cli.globalCommand.versionNumber = require('./package.json').version;
+cli.showVersionOnExit = true;
+
+cli.parse();
+
+if (!cli.matchedCommand && !helpCalled) cli.outputHelp();

cleaner.py

@@ -1,75 +0,0 @@
-
-# notion-enhancer
-# (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
-# (c) 2020 TarasokUA
-# (https://dragonwocky.me/) under the MIT license
-
-import os
-import sys
-import platform
-import subprocess
-from shutil import rmtree
-from time import sleep
-
-# f'{bold}=== title ==={normal}'    = headers
-# '*'                               = information
-# '...'                             = actions
-# '###'                             = warnings
-# '>'                               = exit
-
-bold = '\033[1m'
-normal = '\033[0m'
-
-print(f'{bold}=== NOTION ENHANCER CLEANING LOG ==={normal}\n')
-try:
-    filepath = ''
-    if 'microsoft' in platform.uname()[3].lower() and sys.platform == 'linux':
-        filepath = '/mnt/c/' + \
-            subprocess.run(
-                ['cmd.exe', '/c', 'echo', '%localappdata%'], stdout=subprocess.PIPE).stdout \
-            .rstrip().decode('utf-8')[3:].replace('\\', '/') + '/Programs/Notion/resources'
-    elif sys.platform == 'win32':
-        filepath = subprocess.run(['echo', '%localappdata%'], shell=True, capture_output=True).stdout \
-            .rstrip().decode('utf-8') + '\\Programs\\Notion\\resources'
-    elif sys.platform == 'linux':
-        filepath = '/opt/notion-app' if os.path.exists(
-            '/opt/notion-app') else '/opt/notion'
-    elif sys.platform == 'darwin':
-        filepath = '/Applications/Notion.app/Contents/Resources'
-    else:
-        print(' > script not compatible with your os!\n   (report this to dragonwocky#8449 on discord)')
-        exit()
-
-    if os.path.exists(os.path.join(filepath, 'app')):
-        print(
-            f' ...removing folder {os.path.join(filepath, "app")}')
-        rmtree(os.path.join(filepath, 'app'))
-    else:
-        print(
-            f' * {os.path.join(filepath, "app")} was not found: step skipped.')
-
-    if os.path.isfile(os.path.join(filepath, 'app.asar.bak')):
-        print(' ...renaming asar.app.bak to asar.app')
-        os.rename(os.path.join(filepath, 'app.asar.bak'),
-                  os.path.join(filepath, 'app.asar'))
-    else:
-        print(
-            f' * {os.path.join(filepath, "app.asar.bak")} was not found: step skipped.')
-
-    if sys.platform == 'linux' and 'microsoft' not in platform.uname()[3].lower():
-        bin_path = '/usr/bin/notion-app' if os.path.exists(
-            '/usr/bin/notion-app') else '/usr/bin/notion'
-        with open(bin_path, 'r', encoding='UTF-8') as launcher:
-            if 'app.asar' not in launcher:
-                print(
-                    f' ...patching app launcher')
-                subprocess.call(
-                    ['sed', '-i', r's/electron\ app/electron\ app\.asar/',
-                     bin_path])
-
-    print(f'\n{bold}>>> SUCCESSFULLY CLEANED <<<{normal}')
-
-except Exception as e:
-    print(f'\n{bold}### ERROR (report this to dragonwocky#8449 on discord) ###{normal}\n{str(e)}')
-
-print(f'\n{bold}=== END OF LOG ==={normal}')

customiser.py

@@ -1,239 +0,0 @@
-
-# notion-enhancer
-# (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
-# (c) 2020 TarasokUA
-# (https://dragonwocky.me/) under the MIT license
-
-import re
-import os
-import sys
-import platform
-import subprocess
-from shutil import copyfile, rmtree
-from time import sleep
-
-# to smooth the update process
-enhancer_version = '0.7.0'
-
-# for toggling notion visibility
-hotkey = 'CmdOrCtrl+Shift+A'
-
-# '=== title ==='                   = headers
-# '*'                               = information
-# '...'                             = actions
-# '##'                              = warnings
-# '>'                               = exit
-
-print('=== NOTION ENHANCER CUSTOMISATION LOG ===\n')
-
-try:
-    filepath = ''
-    __dirname__ = os.path.dirname(__file__)
-    enhancer_folder = os.path.realpath(__dirname__)
-    if 'microsoft' in platform.uname()[3].lower() and sys.platform == 'linux':
-        filepath = '/mnt/c/' + \
-            subprocess.run(
-                ['cmd.exe', '/c', 'echo', '%localappdata%'], stdout=subprocess.PIPE).stdout \
-            .rstrip().decode('utf-8')[3:].replace('\\', '/') + '/Programs/Notion/resources'
-        drive = enhancer_folder[5].capitalize() if enhancer_folder.startswith(
-            '/mnt/') else 'C'
-        enhancer_folder = drive + ':\\' + enhancer_folder[6:]
-    elif sys.platform == 'win32':
-        filepath = subprocess.run(['echo', '%localappdata%'], shell=True, capture_output=True).stdout \
-            .rstrip().decode('utf-8') + '\\Programs\\Notion\\resources'
-    elif sys.platform == 'linux':
-        if os.path.exists('/opt/notion-app'):
-            filepath = '/opt/notion-app'
-        elif os.path.exists('/opt/notion'):
-            filepath = '/opt/notion'
-        elif os.path.exists('/usr/lib/notion-desktop/resources'):
-            filepath = '/usr/lib/notion-desktop/resources'
-    elif sys.platform == 'darwin':
-        filepath = '/Applications/Notion.app/Contents/Resources'
-    else:
-        print(' > script not compatible with your os!\n   (report this to dragonwocky#8449 on discord)')
-        exit()
-    if not filepath or not os.path.exists(filepath):
-        print(
-            ' > nothing found: exiting. notion install is either corrupted or non-existent.')
-        exit()
-
-    unpacking_asar = True
-    if not os.path.isfile(os.path.join(filepath, 'app.asar')):
-        print(f' ## file {os.path.join(filepath, "app.asar")} not found!')
-        print(' * attempting to locate')
-        if os.path.exists(os.path.join(filepath, 'app')):
-            unpacking_asar = False
-            print(' * app.asar was already unpacked: checking version.')
-            cleaning_asar = True
-            if os.path.isfile(os.path.join(filepath, 'app', 'ENHANCER_VERSION.txt')):
-                with open(os.path.join(filepath, 'app', 'ENHANCER_VERSION.txt'), 'r', encoding='UTF-8') as content:
-                    if content.read() == enhancer_version:
-                        cleaning_asar = False
-            if cleaning_asar:
-                unpacking_asar = True
-                print(' * version does not match: cleaning.')
-                if os.path.exists(os.path.join(filepath, 'app')):
-                    print(
-                        f' ...removing folder {os.path.join(filepath, "app")}')
-                    rmtree(os.path.join(filepath, 'app'))
-                else:
-                    print(
-                        f' * {os.path.join(filepath, "app")} was not found: step skipped.')
-                if os.path.isfile(os.path.join(filepath, 'app.asar.bak')):
-                    print(' ...renaming asar.app.bak to asar.app')
-                    os.rename(os.path.join(filepath, 'app.asar.bak'),
-                              os.path.join(filepath, 'app.asar'))
-                else:
-                    print(
-                        f' * {os.path.join(filepath, "app.asar.bak")} was not found: exiting. notion install is corrupted.')
-                    exit()
-            else:
-                print(' * version matches: continuing.')
-        else:
-            print(
-                ' > nothing found: exiting. notion install is either corrupted or non-existent.')
-            exit()
-    if unpacking_asar:
-        print(' ...unpacking app.asar')
-        subprocess.run(['asar', 'extract', os.path.join(filepath, 'app.asar'), os.path.join(
-            filepath, 'app')], shell=(True if sys.platform == 'win32' else False))
-        print(' ...renaming asar.app to asar.app.bak')
-        os.rename(os.path.join(filepath, 'app.asar'),
-                  os.path.join(filepath, 'app.asar.bak'))
-        with open(os.path.join(filepath, 'app', 'ENHANCER_VERSION.txt'), 'w', encoding='UTF-8') as write:
-            write.write(enhancer_version)
-
-    if os.path.isfile(os.path.join(filepath, 'app', 'renderer', 'preload.js')):
-        print(
-            f' ...adding preload.js to {os.path.join(filepath, "app","renderer","preload.js")}')
-        with open(os.path.join(filepath, 'app', 'renderer', 'preload.js'), 'r', encoding='UTF-8') as content:
-            if '/* === INJECTION MARKER === */' in content.read():
-                print(' * preload.js already added. replacing it.')
-                content.seek(0)
-                original = []
-                for num, line in enumerate(content):
-                    if '/* === INJECTION MARKER === */' in line:
-                        break
-                    original += line
-                with open(os.path.join(filepath, 'app', 'renderer', 'preload.js'), 'w', encoding='UTF-8') as write:
-                    write.writelines(original)
-            else:
-                with open(os.path.join(filepath, 'app', 'renderer', 'preload.js'), 'a', encoding='UTF-8') as append:
-                    append.write('\n\n')
-        with open(os.path.join(filepath, 'app', 'renderer', 'preload.js'), 'a', encoding='UTF-8') as append:
-            print(
-                f' ...linking to {os.path.join(".", "resources", "user.css")}')
-            with open(os.path.join(__dirname__, 'resources', 'preload.js'), 'r', encoding='UTF-8') as insert:
-                append.write(insert.read().replace(
-                    '☃☃☃resources☃☃☃', os.path.join(enhancer_folder, 'resources').replace('\\', '/'))
-                    .replace('☃☃☃version☃☃☃', enhancer_version))
-    else:
-        print(
-            f' * {os.path.join(filepath, "app","renderer","preload.js")} was not found: step skipped.')
-
-    if os.path.isfile(os.path.join(filepath, "app", "main", "createWindow.js")):
-        with open(os.path.join(filepath, "app", "main", "createWindow.js"), 'r', encoding='UTF-8') as content:
-            content = content.read()
-            print(
-                f' ...making window frameless @ {os.path.join(filepath, "app", "main", "createWindow.js")}')
-            if '{ frame: false, show: false' not in content:
-                content = content.replace(
-                    '{ show: false', '{ frame: false, show: false')
-            print(
-                f' ...adding "open hidden" capabilities to {os.path.join(filepath, "app", "main", "createWindow.js")}')
-            content = re.sub('\\s*\\/\\* === INJECTION START === \\*\\/.*?\\/\\* === INJECTION END === \\*\\/\\s*',
-                             'window.show()', content, flags=re.DOTALL).replace('window.show()', """
-                /* === INJECTION START === */
-                const path = require('path'),
-                    store = require(path.join(__dirname, '..', 'store.js'))({
-                        config: 'user-preferences',
-                        defaults: {
-                            openhidden: false,
-                            maximized: false,
-                            tray: false,
-                        }
-                    });
-                if (!store.openhidden || electron_1.BrowserWindow.getAllWindows().some(win => win.isVisible()))
-                    { window.show(); if (store.maximized) window.maximize(); }
-                let appQuit = false;
-                window.on('close', (e) => {
-                    if (appQuit || !store.tray) window = null;
-                    else {
-                        e.preventDefault();
-                        window.hide();
-                    }
-                });
-                electron_1.app.on('activate', () => window.show());
-                electron_1.app.on('before-quit', () => (appQuit = true));
-                /* === INJECTION END === */
-            """)
-            with open(os.path.join(filepath, "app", "main", "createWindow.js"), 'w', encoding='UTF-8') as write:
-                write.write(content)
-    else:
-        print(
-            f' * {os.path.join(filepath, "app", "main", "createWindow.js")} was not found: step skipped.')
-
-    if os.path.isfile(os.path.join(filepath, "app", "renderer", "index.js")):
-        with open(os.path.join(filepath, "app", "renderer", "index.js"), 'r', encoding='UTF-8') as content:
-            print(
-                f' ...adjusting drag area for frameless window in {os.path.join(filepath, "app", "renderer", "index.js")}')
-            content = content.read()
-            loc = content.rfind('dragRegionStyle')
-            content = content[:loc] + content[loc:] \
-                .replace('top: 0', 'top: 1', 1) \
-                .replace('height: 34', 'height: 10', 1)
-            with open(os.path.join(filepath, "app", "renderer", "index.js"), 'w', encoding='UTF-8') as write:
-                write.write(content)
-    else:
-        print(
-            f' * {os.path.join(filepath, "app", "renderer", "index.js")} was not found: step skipped.')
-
-    if os.path.isfile(os.path.join(filepath, "app", "main", "main.js")):
-        with open(os.path.join(filepath, "app", "main", "main.js"), 'r', encoding='UTF-8') as content:
-            print(
-                f' ...adding tray support (inc. context menu with settings) to {os.path.join(filepath, "app", "main", "main.js")}')
-            print(
-                f' ...adding window toggle hotkey to {os.path.join(filepath, "app", "main", "main.js")}')
-            content = content.read()
-            with open(os.path.join(filepath, "app", "main", "main.js"), 'w', encoding='UTF-8') as write:
-                if '/* === INJECTION MARKER === */' in content:
-                    print(' * tray.js already added. replacing it.')
-                    original = []
-                    for line in content.splitlines():
-                        if '/* === INJECTION MARKER === */' in line:
-                            break
-                        original.append(line)
-                    write.write('\n'.join(original))
-                else:
-                    write.write(content.replace(
-                        'electron_1.app.on("ready", handleReady);',
-                        'electron_1.app.on("ready", () => handleReady() && enhancements());') + '\n')
-        with open(os.path.join(filepath, "app", "main", "main.js"), 'a', encoding='UTF-8') as append:
-            with open(os.path.join(__dirname__, 'resources', 'tray.js'), 'r', encoding='UTF-8') as insert:
-                append.write('\n' + insert.read().replace(
-                    '☃☃☃hotkey☃☃☃', hotkey).replace(
-                    '☃☃☃resources☃☃☃', os.path.join(enhancer_folder, 'resources').replace('\\', '/'))
-                )
-        print(
-            f' ...copying datastore wrapper {os.path.join(".", "resources", "store.js")} to {os.path.join(filepath, "app")}')
-        copyfile(os.path.join(__dirname__, 'resources', 'store.js'),
-                 os.path.join(filepath, "app", "store.js"))
-    else:
-        print(
-            f' * {os.path.join(filepath, "app", "main", "main.js")} was not found: step skipped.')
-
-    if sys.platform == 'linux' and 'microsoft' not in platform.uname()[3].lower():
-        print(
-            f' ...patching app launcher')
-        subprocess.call(
-            ['sed', '-i', r's/electron\ app\.asar/electron\ app/',
-             '/usr/bin/notion-app' if os.path.exists('/usr/bin/notion-app') else '/usr/bin/notion'])
-
-    print('\n>>> SUCCESSFULLY CUSTOMISED <<<')
-
-except Exception as e:
-    print(
-        f'\n### ERROR (report this to dragonwocky#8449 on discord) ###\n{str(e)}')
-
-print('\n=== END OF LOG ===')

docs.json

@@ -1,34 +0,0 @@
-{
-  "title": "notion enhancer",
-  "primary": "rgb(75, 133, 209)",
-  "git": "https://github.com/dragonwocky/notion-enhancer/blob/master/",
-  "footer": "[Edit on GitHub](__git__) // © 2020 dragonwocky & Uzver, under the [MIT license](https://choosealicense.com/licenses/mit/).",
-  "card": {
-    "description": "an enhancer/customiser for the all-in-one productivity workspace notion.so",
-    "url": "https://dragonwocky.me/notion-enhancer/"
-  },
-  "icon": {
-    "light": "notion.png"
-  },
-  "overwrite": true,
-  "exclude": [
-    "cleaner.py",
-    "customiser.py",
-    "resources/*",
-    ".gitignore",
-    "Pipfile",
-    "Pipfile.lock"
-  ],
-  "nav": [
-    ["index.html", "README.md"],
-    ["styling.html", "STYLING.md"],
-    "resources",
-    ["changelog.html", "CHANGELOG.md"],
-    [
-      "license",
-      "https://github.com/dragonwocky/notion-enhancer/blob/master/LICENSE"
-    ],
-    ["github", "https://github.com/dragonwocky/notion-enhancer/"],
-    ["me (dragonwocky)", "https://dragonwocky.me/"]
-  ]
-}

docs/LICENSE

@@ -1,22 +0,0 @@
-MIT License
-
-Copyright (c) 2020 TarasokUA
-Copyright (c) 2020 dragonwocky
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

docs/changelog.html

@@ -1,136 +0,0 @@
-<!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="notion.png" media="(prefers-color-scheme: dark)"><link rel="icon" href="notion.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/notion.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="notion.png" media="(prefers-color-scheme: dark)"><img src="notion.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="#v070-2020-07-09">v0.7.0 (2020-07-09)</a></li><li class="level-3"><a href="#v060-2020-06-30">v0.6.0 (2020-06-30)</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>
-              <a href="#changelog">changelog</a>
-            </h1>
-        <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#" title="">docs</a>.</p>
-
-          </section>
-          <section class="block" id="v070-2020-07-09">
-            <h3>
-              <a href="#v070-2020-07-09">v0.7.0 (2020-07-09)</a>
-            </h3>
-        <ul>
-<li>new: tray option to use system default emojis (instead of twitter&#39;s emojiset).</li>
-<li>new: mac support (identical functionality to others platforms with the
-exception of the native minimise/maximise/close buttons being kept, as they integrate
-better with the OS while not being out-of-place in notion).</li>
-<li>new: notion-deb-builder support for linux.</li>
-<li>new: an alert will be shown if there is an update available for the enhancer.</li>
-<li>improved: replaced button symbols with svgs for multi-platform support.</li>
-<li>improved: window close button is now red on hover (thanks to <a href="https://github.com/torchatlas#" title="">@torchatlas</a>).</li>
-<li>bugfix: <code>cleaner.py</code> patched for linux.</li>
-<li>bugfix: tray now operates as expected on linux.</li>
-<li>bugfix: odd mix of <code>\\</code> and <code>/</code> being used for windows filepaths.</li>
-<li>bugfix: app no longer crashes when sidebar is toggled.</li>
-</ul>
-
-          </section>
-          <section class="block" id="v060-2020-06-30">
-            <h3>
-              <a href="#v060-2020-06-30">v0.6.0 (2020-06-30)</a>
-            </h3>
-        <ul>
-<li>style: custom fonts.</li>
-<li>style: font resizing.</li>
-<li>style: hide discussions (thanks to <a href="https://www.reddit.com/user/Roosmaryn/#" title="">u/Roosmaryn</a>).</li>
-<li>new: custom colour theming, demonstrated via the dark+ theme.</li>
-<li>new: linux support (thanks to <a href="https://github.com/Blacksuan19#" title="">@Blacksuan19</a>).</li>
-<li>improved: if hotkey is pressed while notion is unfocused, it will bring it to the front rather than hiding it.</li>
-<li>improved: stop window buttons breaking at smaller widths.</li>
-<li>improved: more obviously visible drag area.</li>
-<li>bugfix: specify UTF-8 encoding to prevent multibyte/gbk codec errors (thanks to <a href="https://github.com/etnperlong#" title="">@etnperlong</a>).</li>
-</ul>
-<blockquote>
-<p>📥 <a href="https://github.com/dragonwocky/notion-enhancer/archive/v0.6.0.zip#" title="">notion-enhancer.v0.6.0.zip</a></p>
-</blockquote>
-
-          </section>
-          <section class="block" id="v050-2020-05-23">
-            <h3>
-              <a href="#v050-2020-05-23">v0.5.0 (2020-05-23)</a>
-            </h3>
-        <ul>
-<li>new: running from the wsl.</li>
-<li>new: reload window with f5.</li>
-<li>improved: code has been refactored and cleaned up,
-inc. file renaming and a <code>customiser.py</code> that doesn&#39;t require
-a run of <code>cleaner.py</code> to build modifications.
-improved: scrollbar colours that fit better with notion&#39;s theming.</li>
-<li>bugfix: un-break having multiple notion windows open.</li>
-</ul>
-<blockquote>
-<p>📥 <a href="https://github.com/dragonwocky/notion-enhancer/archive/v0.5.0.zip#" title="">notion-enhancer.v0.5.0.zip</a></p>
-</blockquote>
-<p><em>(forked by <a href="https://github.com/dragonwocky#" title="">@dragonwocky</a>.)</em></p>
-
-          </section>
-          <section class="block" id="v041-2020-02-13">
-            <h3>
-              <a href="#v041-2020-02-13">v0.4.1 (2020-02-13)</a>
-            </h3>
-        <ul>
-<li>bugfix: wider table &amp; the &quot;+&quot; button not working in database pages.</li>
-</ul>
-<blockquote>
-<p>📥 <a href="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d239a3cf-d553-4ef3-ab04-8b47892d9f9a/Notion_Customization_v4.1.zip#" title="">notion-enhancer.v4.1.zip</a></p>
-</blockquote>
-
-          </section>
-          <section class="block" id="v040">
-            <h3>
-              <a href="#v040">v0.4.0</a>
-            </h3>
-        <ul>
-<li>new: tray icon.</li>
-<li>new: app startup options (+ saving).</li>
-<li>new: <code>Reset.py</code></li>
-<li>improved: better output from <code>Customization Patcher.py</code>.</li>
-<li>bugfix: wider tables in &quot;short page&quot; mode.</li>
-<li>bugfix: unclickable buttons/draggable area (of titlebar).</li>
-</ul>
-
-          </section>
-          <section class="block" id="v030">
-            <h3>
-              <a href="#v030">v0.3.0</a>
-            </h3>
-        <ul>
-<li>new: show/hide window hotkey.</li>
-<li>new: app startup options.</li>
-<li><del>style: smaller table icons.</del></li>
-</ul>
-<blockquote>
-<p>📥 <a href="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b01aa446-5727-476a-a25e-395472bfb1be/NotionScriptsV3.zip#" title="">notion-enhancer.v3.zip</a></p>
-</blockquote>
-
-          </section>
-          <section class="block" id="v020">
-            <h3>
-              <a href="#v020">v0.2.0</a>
-            </h3>
-        <ul>
-<li>new: light/dark theme support for window control buttons + scrollbars.</li>
-<li>new: custom styles directly linked to the enhancer resources + compatible with web version.</li>
-<li><del>improved: making table column width go below 100px.</del></li>
-</ul>
-
-          </section>
-          <section class="block" id="v010">
-            <h3>
-              <a href="#v010">v0.1.0</a>
-            </h3>
-        <ul>
-<li>new: custom window control buttons.</li>
-<li>removed: default titlebar/menubar.</li>
-<li><del>removed: huge padding of board view.</del></li>
-<li><del>removed: huge padding of table view.</del></li>
-<li><del>optional: making table column width go below 100px.</del></li>
-<li><del>style: thinner cover image + higher content block.</del></li>
-<li>style: scrollbars.</li>
-</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>
-</footer><nav><a class="prev" href="styling.html">ᐊ</a></nav></article></div></body></html>

docs/docs.css

@@ -1,501 +0,0 @@
-/*
- * Documentative Styling
- * (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
- * (https://dragonwocky.me/) under the MIT license
- */
-:root {
-  --primary: #4b85d1;
-  --absolute: #000;
-  --contrast: #fff;
-  --text: rgba(0, 0, 0, 0.84);
-  --link: var(--primary);
-  --grey: #6f6f6f;
-  --bg: #fbfcfc;
-  --box: #f2f3f4;
-  --code: #f7f9f9;
-  --button: #eee;
-  --border: #e5e7e9;
-  --shadow: #eee;
-  --glow: transparent;
-  --scroll: #e9e9e9;
-  --hover: #dedede;
-  --code-lang: #555;
-  --hljs-html: #000080;
-  --hljs-attr: #008080;
-  --hljs-obj: #2c426b;
-  --hljs-string: #d14;
-  --hljs-builtin: #0086b3;
-  --hljs-keyword: rgba(0, 0, 0, 0.84);
-  --hljs-selector: #900;
-  --hljs-type: #458;
-  --hljs-regex: #009926;
-  --hljs-symbol: #990073;
-  --hljs-meta: #999;
-  --hljs-comment: #707070;
-  --hljs-deletion: #e8b9b8;
-  --hljs-deletion-text: #4c232d;
-  --hljs-addition: #b9e0d3;
-  --hljs-addition-text: #1e4839;
-}
-@media (prefers-color-scheme: dark) {
-  :root {
-    --absolute: #fff;
-    --contrast: #000;
-    --text: #ddd;
-    --link: #a6c3e8;
-    --grey: #52555c;
-    --bg: #0e0f0f;
-    --box: #050505;
-    --code: #000;
-    --button: #2d2d2d;
-    --border: #2d2e2f;
-    --shadow: #070707;
-    --glow: var(--primary);
-    --scroll: #202225;
-    --hover: #36393f;
-    --code-lang: #ccc;
-    --hljs-html: #46db8c;
-    --hljs-attr: #dd1111;
-    --hljs-obj: #c6cbda;
-    --hljs-string: #abcdef;
-    --hljs-builtin: #b8528d;
-    /* bd1a79, 926956 */
-    --hljs-keyword: #2d8b59;
-    --hljs-comment: #a0a0a0;
-    --hljs-deletion: #4c232d;
-    --hljs-deletion-text: #e8b9b8;
-    --hljs-addition: #1e4839;
-    --hljs-addition-text: #b9e0d3;
-  }
-}
-* {
-  box-sizing: border-box;
-  word-break: break-word;
-  text-decoration: none;
-  text-size-adjust: 100%;
-}
-html,
-body {
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-}
-body {
-  color: var(--text);
-  background-color: var(--bg);
-  font-family: 'Nunito Sans', sans-serif;
-}
-::-webkit-scrollbar {
-  width: 2px;
-  height: 2px;
-}
-::-webkit-scrollbar-corner,
-::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-::-webkit-scrollbar-thumb {
-  background-color: var(--scroll);
-  border-radius: 5px;
-}
-::-webkit-scrollbar-thumb:hover {
-  background: var(--hover);
-}
-aside {
-  display: flex;
-  flex-direction: column;
-  background-color: var(--box);
-  overflow-x: auto;
-}
-aside .title {
-  display: flex;
-  flex-direction: row;
-}
-aside .title h1 {
-  font: 1.8em 'Source Code Pro', monospace;
-  margin: 0 0 1em 1.5rem;
-  padding: 1em 8px 2.5px 0;
-  letter-spacing: -2px;
-  border-bottom: 5px solid var(--primary);
-  color: var(--absolute);
-}
-aside .title .icon {
-  margin: auto 0.5em;
-}
-aside .title .icon img {
-  width: 2.5em;
-  margin: auto 0.5em;
-}
-aside > ul:first-child > li:first-child {
-  padding-top: 1em;
-}
-aside ul {
-  list-style-type: none;
-  padding-inline-start: 0;
-  margin: 0;
-}
-aside ul li p {
-  font-weight: bold;
-  letter-spacing: -0.5px;
-  margin-bottom: 0;
-  padding: 2px 1.3em;
-  font-size: 1.1em;
-  color: var(--hljs-comment);
-}
-aside ul li a {
-  color: var(--text);
-  padding-bottom: 0.1em 5em;
-  display: block;
-  padding: 2px 1.5em;
-}
-aside ul li a:hover,
-aside ul li a:active {
-  background: var(--scroll);
-}
-aside ul li a.active {
-  color: var(--link);
-  font-weight: bold;
-  text-shadow: 0 0 0.75em var(--glow);
-}
-aside ul li.entry > a {
-  text-decoration: underline var(--border);
-}
-aside ul li.level-1 > a {
-  padding-left: 1.75em;
-}
-aside ul li.level-2 > a {
-  padding-left: calc(1.5em + calc(0.75em * 1));
-}
-aside ul li.level-3 > a {
-  padding-left: calc(1.5em + calc(0.75em * 2));
-}
-aside ul li.level-4 > a {
-  padding-left: calc(1.5em + calc(0.75em * 3));
-}
-aside ul li.level-5 > a {
-  padding-left: calc(1.5em + calc(0.75em * 4));
-}
-aside ul li.level-6 > a {
-  padding-left: calc(1.5em + calc(0.75em * 5));
-}
-aside .mark {
-  text-align: right;
-  margin-top: auto;
-  padding: 1.5em 1.5em 2px 1.5em;
-  font-size: 0.8em;
-}
-aside .mark a {
-  color: var(--grey);
-}
-.wrapper {
-  height: 100%;
-  width: 100%;
-  overflow-y: hidden;
-}
-.wrapper .documentative {
-  height: 100%;
-  overflow-y: auto;
-  padding: 0 1.5em;
-  padding-bottom: 4em;
-  display: flex;
-  flex-direction: column;
-}
-.wrapper .documentative .block {
-  margin: 1.5em;
-  word-wrap: break-word;
-}
-.wrapper .documentative .block:first-child {
-  margin: 0 1.5em 1.5em 1.5em;
-}
-.wrapper .documentative .example {
-  margin-top: 1em;
-  padding: 1em;
-  background-color: var(--box);
-  box-shadow: 0.4em 0.4em 1em var(--shadow);
-}
-.wrapper .documentative .example p:first-child {
-  margin-top: 0;
-}
-.wrapper .documentative .example p:last-child {
-  margin-bottom: 0;
-}
-.wrapper .documentative nav {
-  width: 75%;
-  position: fixed;
-  bottom: 1em;
-  right: 0;
-  pointer-events: none;
-}
-.wrapper .documentative nav .prev {
-  float: left;
-  padding-right: 0.13em;
-}
-.wrapper .documentative nav .next {
-  float: right;
-  padding-left: 0.13em;
-}
-.wrapper .documentative nav .prev,
-.wrapper .documentative nav .next {
-  opacity: 1;
-  transition: opacity 200ms ease;
-  pointer-events: all;
-  border-radius: 50%;
-  width: 1.75em;
-  height: 1.75em;
-  margin: 0 1em;
-  font: 1.5em 'Source Code Pro', monospace;
-  line-height: 1.75em;
-  text-align: center;
-  color: var(--text);
-  text-shadow: none !important;
-  background-color: var(--button);
-}
-.wrapper .documentative .footer {
-  text-align: right;
-  color: var(--grey);
-  margin: auto 1.5em 0;
-}
-.wrapper .documentative .footer hr {
-  border-color: var(--grey);
-}
-.wrapper .documentative .footer a {
-  color: var(--grey);
-  font-weight: bold;
-  text-shadow: none;
-  text-decoration: dotted underline;
-}
-.wrapper .documentative h1,
-.wrapper .documentative h2,
-.wrapper .documentative h3,
-.wrapper .documentative h4,
-.wrapper .documentative h5,
-.wrapper .documentative h6 {
-  margin: 0;
-  padding-top: 1em;
-}
-.wrapper .documentative h1 a,
-.wrapper .documentative h2 a,
-.wrapper .documentative h3 a,
-.wrapper .documentative h4 a,
-.wrapper .documentative h5 a,
-.wrapper .documentative h6 a {
-  color: var(--text);
-  text-shadow: none;
-}
-.wrapper .documentative h1 {
-  padding-top: 1.5em;
-}
-.wrapper .documentative a {
-  color: var(--link);
-  text-shadow: 0 0 0.75em var(--glow);
-}
-.wrapper .documentative img {
-  max-width: 100%;
-}
-.wrapper .documentative blockquote {
-  margin-left: 0;
-  padding-left: 1em;
-  border-left: 0.25em solid var(--border);
-}
-.wrapper .documentative h1 + table,
-.wrapper .documentative h2 + table,
-.wrapper .documentative h3 + table,
-.wrapper .documentative h4 + table,
-.wrapper .documentative h5 + table,
-.wrapper .documentative h6 + table {
-  margin-top: 1em;
-}
-.wrapper .documentative table {
-  width: 100%;
-  border-collapse: collapse;
-}
-.wrapper .documentative table,
-.wrapper .documentative th,
-.wrapper .documentative td {
-  padding: 0.2em 0.7em;
-  border: 1px solid var(--border);
-}
-.wrapper .documentative code {
-  font-size: 0.8em;
-  background-color: var(--code);
-  overflow-x: auto;
-  position: relative;
-  display: block;
-  font-family: 'Source Code Pro', monospace;
-}
-.wrapper .documentative *:not(pre) > code {
-  padding: 0.275em 0.35em;
-  border-radius: 2px;
-  display: inline;
-}
-.wrapper .documentative pre {
-  position: relative;
-}
-.wrapper .documentative pre code {
-  padding: 1.8em;
-  border-radius: 5px;
-  position: static;
-}
-.wrapper .documentative pre code::before {
-  position: absolute;
-  right: 0;
-  top: 0;
-  color: var(--code-lang);
-  font-size: 0.65em;
-  padding: 0.5em 0.8em;
-}
-@media (min-width: 769px) {
-  body {
-    display: grid;
-    grid-template-columns: 25% 75%;
-  }
-  aside::-webkit-scrollbar-corner,
-  aside::-webkit-scrollbar-track {
-    background-color: var(--bg);
-  }
-  .toggle {
-    display: none;
-  }
-}
-@media (max-width: 768px) {
-  aside {
-    z-index: 1;
-    height: 100%;
-    display: flex;
-    position: fixed;
-    top: 0;
-    left: calc(4.5em - 100%);
-    width: calc(100% - 4.5em);
-    transition: left 300ms ease;
-  }
-  .wrapper {
-    display: flex;
-    flex-direction: column;
-    position: fixed;
-    top: 0;
-    left: 0;
-    transition: left 300ms ease;
-  }
-  .wrapper .documentative {
-    flex-shrink: 1;
-  }
-  .wrapper .documentative nav {
-    width: 100%;
-  }
-  .wrapper .toggle {
-    display: flex;
-    flex-direction: row;
-    flex-shrink: 0;
-    padding: 0.8em 0;
-    background-color: var(--box);
-  }
-  .wrapper .toggle h1 {
-    letter-spacing: -2px;
-    font-size: 1.8em;
-    padding-top: 1.5px;
-    margin: auto 1.5rem auto 0;
-  }
-  .wrapper .toggle button {
-    font-size: 1.8em;
-    width: 2.5em;
-    margin: auto 0.5em;
-    color: var(--absolute);
-    border: none;
-    background: none;
-    text-align: center;
-    transition: transform 150ms ease;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-  }
-  .wrapper .toggle button:hover,
-  .wrapper .toggle button:focus {
-    color: var(--text);
-  }
-  .wrapper .toggle button:active {
-    transform: scale(0.95);
-  }
-  .mobilemenu aside {
-    left: 0;
-  }
-  .mobilemenu .wrapper {
-    left: calc(100% - 4.75em);
-  }
-  .mobilemenu .wrapper .prev,
-  .mobilemenu .wrapper .next {
-    opacity: 0 !important;
-    pointer-events: none !important;
-  }
-}
-.hljs-subst {
-  color: var(--text);
-}
-.hljs-comment,
-.hljs-quote {
-  color: var(--hljs-comment);
-  font-style: italic;
-}
-.hljs-keyword,
-.hljs-selector-tag {
-  color: var(--hljs-keyword);
-  font-weight: bold;
-}
-.hljs-attr {
-  color: var(--hljs-obj);
-}
-.hljs-number,
-.hljs-literal,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-tag .hljs-attr {
-  color: var(--hljs-attr);
-}
-.hljs-string,
-.hljs-doctag {
-  color: var(--hljs-string);
-}
-.hljs-name,
-.hljs-attribute {
-  color: var(--hljs-html);
-}
-.hljs-built_in,
-.hljs-builtin-name {
-  color: var(--hljs-builtin);
-}
-.hljs-title,
-.hljs-section,
-.hljs-selector-id {
-  color: var(--hljs-selector);
-  font-weight: bold;
-}
-.hljs-type,
-.hljs-class .hljs-title {
-  color: var(--hljs-type);
-  font-weight: bold;
-}
-.hljs-regexp,
-.hljs-link {
-  color: var(--hljs-regex);
-}
-.hljs-symbol,
-.hljs-bullet {
-  color: var(--hljs-symbol);
-}
-.hljs-meta {
-  color: var(--hljs-meta);
-  font-weight: bold;
-}
-.hljs-deletion {
-  background: var(--hljs-deletion);
-  color: var(--hljs-deletion-text);
-}
-.hljs-addition {
-  background: var(--hljs-addition);
-  color: var(--hljs-addition-text);
-}
-.hljs-emphasis {
-  font-style: italic;
-}
-.hljs-strong {
-  font-weight: bold;
-}
-.documentative pre .lang-css::before { content: 'CSS'; }

docs/docs.js

@@ -1,193 +0,0 @@
-/*
- * Documentative
- * (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
- * (https://dragonwocky.me/) under the MIT license
- */
-
-class Scrollnav {
-  constructor(menu, content, options) {
-    if (!(menu instanceof HTMLElement))
-      throw Error('scrollnav: invalid <menu> element provided');
-    if (!(content instanceof HTMLElement))
-      throw Error('scrollnav: invalid <content> element provided');
-    if (typeof options !== 'object') options = {};
-
-    if (Scrollnav.prototype.INITIATED)
-      throw Error('scrollnav: only 1 instance per page allowed!');
-    Scrollnav.prototype.INITIATED = true;
-
-    this.ID;
-    this.ticking = [];
-    this._menu = menu;
-    this._content = content;
-    this._links = [];
-    this._sections = [...this._menu.querySelectorAll('ul li a')].reduce(
-      (list, link) => {
-        if (!link.getAttribute('href').startsWith('#')) return list;
-        let section = this._content.querySelector(link.getAttribute('href'));
-        if (!section) return list;
-
-        this._links.push(link);
-        link.onclick = async ev => {
-          ev.preventDefault();
-          const ID = link.getAttribute('href');
-          this.highlightHeading(ID);
-          this.scrollContent(ID);
-          this.setHash(ID);
-        };
-
-        return [...list, section];
-      },
-      []
-    );
-    this._topheading = `#${this._sections[0].id}`;
-
-    window.onhashchange = this.watchHash.bind(this);
-    this._content.addEventListener('scroll', ev => {
-      if (!this.ticking.length) {
-        this.ticking.push(1);
-        requestAnimationFrame(() => {
-          this.watchScroll(ev);
-          this.ticking.pop();
-        });
-      }
-    });
-
-    this.set(null, false);
-    return this;
-  }
-
-  set(ID, smooth) {
-    this.highlightHeading(ID);
-    this.scrollMenu(ID, smooth);
-    this.scrollContent(ID, smooth);
-    this.setHash(ID);
-  }
-
-  parseID(ID) {
-    if (!ID || typeof ID !== 'string') ID = location.hash || this._topheading;
-    if (!ID.startsWith('#')) ID = `#${ID}`;
-    if (!this._links.find(el => el.getAttribute('href') === ID))
-      ID = this._topheading;
-    this.ID = ID;
-    return ID;
-  }
-  highlightHeading(ID) {
-    this.parseID(ID);
-    this._links.forEach(el =>
-      el.getAttribute('href') === this.ID
-        ? el.classList.add('active')
-        : el.classList.remove('active')
-    );
-    return true;
-  }
-
-  watchHash(ev) {
-    ev.preventDefault();
-    if (ev.newURL !== ev.oldURL) {
-      this.set();
-    }
-  }
-  setHash(ID) {
-    if (!history.replaceState) return false;
-    this.parseID(ID);
-    history.replaceState(null, null, ID === this._topheading ? '#' : this.ID);
-    return true;
-  }
-
-  scrollContent(ID, smooth = true) {
-    this.ticking.push(1);
-    this.parseID(ID);
-    let offset = this._sections.find(el => `#${el.id}` === this.ID).offsetTop;
-    if (offset < this._content.clientHeight / 2) offset = 0;
-    this._content.scroll({
-      top: offset,
-      behavior: smooth ? 'smooth' : 'auto'
-    });
-    setTimeout(() => this.ticking.pop(), 1000);
-    return true;
-  }
-  scrollMenu(ID, smooth = true) {
-    this.parseID(ID);
-    let offset = this._links.find(el => el.getAttribute('href') === this.ID)
-      .offsetTop;
-    if (offset < this._menu.clientHeight / 2) offset = 0;
-    this._menu.scroll({
-      top: offset,
-      behavior: smooth ? 'smooth' : 'auto'
-    });
-    return true;
-  }
-  watchScroll(ev) {
-    const viewport = this._content.clientHeight,
-      ID = this._sections.reduce(
-        (carry, el) => {
-          const rect = el.getBoundingClientRect(),
-            height = rect.bottom - rect.top,
-            visible = {
-              top: rect.top >= 0 && rect.top < viewport,
-              bottom: rect.bottom > 0 && rect.top < viewport
-            };
-          let pixels = 0;
-          if (visible.top && visible.bottom) {
-            pixels = height; // whole el
-          } else if (visible.top) {
-            pixels = viewport - rect.top;
-          } else if (visible.bottom) {
-            pixels = rect.bottom;
-          } else if (height > viewport && rect.top < 0) {
-            const absolute = Math.abs(rect.top);
-            if (absolute < height) pixels = height - absolute; // part of el
-          }
-          pixels = (pixels / height) * 100;
-          return pixels > carry[0] ? [pixels, el] : carry;
-        },
-        [0, null]
-      )[1].id;
-    this.ID = ID;
-    this.scrollMenu(this.ID);
-    clearTimeout(this.afterScroll);
-    this.afterScroll = setTimeout(
-      () => void (this.highlightHeading(this.ID) && this.setHash(this.ID)),
-      100
-    );
-  }
-}
-
-let constructed = false;
-const construct = () => {
-  if (document.readyState !== 'complete' || constructed) return false;
-  constructed = true;
-
-  if (
-    location.pathname.endsWith('index.html') &&
-    window.location.protocol === 'https:'
-  )
-    location.replace('./' + location.hash);
-
-  new Scrollnav(
-    document.querySelector('aside'),
-    document.querySelector('.documentative')
-  );
-
-  document.querySelector('.toggle button').onclick = () =>
-    document.body.classList.toggle('mobilemenu');
-
-  if (window.matchMedia) {
-    let prev;
-    const links = [...document.head.querySelectorAll('link[rel*="icon"]')],
-      pointer = document.createElement('link');
-    pointer.setAttribute('rel', 'icon');
-    document.head.appendChild(pointer);
-    setInterval(() => {
-      const match = links.find(link => window.matchMedia(link.media).matches);
-      if (!match || match.media === prev) return;
-      prev = match.media;
-      pointer.setAttribute('href', match.getAttribute('href'));
-    }, 500);
-    links.forEach(link => document.head.removeChild(link));
-  }
-};
-
-construct();
-document.addEventListener('readystatechange', construct);

docs/index.html

@@ -1,160 +0,0 @@
-<!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="notion.png" media="(prefers-color-scheme: dark)"><link rel="icon" href="notion.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/notion.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="notion.png" media="(prefers-color-scheme: dark)"><img src="notion.png"></picture></div></div><ul class="nav"><li class="entry"><a href="#notion-enhancer">notion enhancer</a><ul><li class="level-2"><a href="#supported-clients">supported clients</a></li><li class="level-2"><a href="#installation">installation</a></li><li class="level-2"><a href="#faq">faq</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">
-            <h1>
-              <a href="#notion-enhancer">notion enhancer</a>
-            </h1>
-        <p>an enhancer/customiser for the all-in-one productivity workspace <a href="https://www.notion.so/#" title="">notion.so</a></p>
-
-          </section>
-          <section class="block" id="supported-clients">
-            <h2>
-              <a href="#supported-clients">supported clients</a>
-            </h2>
-        <p>there are a lot of ways to use notion. some official clients, many not.</p>
-<p>the enhancer supports:</p>
-<ul>
-<li>the <a href="https://notion.so/desktop#" title="">official windows/mac releases</a>.</li>
-<li>the arch linux AUR <a href="https://aur.archlinux.org/packages/notion-app/#" title="">notion-app</a> package</li>
-<li>the linux <a href="https://github.com/jaredallard/notion-app#" title="">notion-app</a> installer</li>
-<li>the debian <a href="https://github.com/davidbailey00/notion-deb-builder/tree/229f2868e117e81858618783b83babd00c595000#" title="">notion-deb-builder</a>.</li>
-</ul>
-<p>there are others, yes. the enhancer does not support them. you should not expect them to work.
-if for some reason you need to use one of them instead of the above listed ones, open a
-<a href="https://github.com/dragonwocky/notion-enhancer/issues/new?assignees=&labels=enhancement&template=platform-support.md&title=#" title="">platform support</a> request.</p>
-<p>please do not modify the enhancer code specifically to work for your installation.
-if you have the know-how to do so, instead open a pull request with your changes
-so that proper support can be added for all users of that client.</p>
-<p>mobile clients are not supported and due to system limitations/restrictions cannot be.</p>
-<p>(the <a href="#styling" title="">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#" title="">stylus</a>
-or a built-in feature like <a href="https://www.userchrome.org/#" title="">userChrome.css</a>.)</p>
-<p>if the script is run from the WSL, it will enhance the windows version of the app.</p>
-
-          </section>
-          <section class="block" id="installation">
-            <h2>
-              <a href="#installation">installation</a>
-            </h2>
-        <ol>
-<li>install node.js: <a href="https://nodejs.org/en/download/#" title="">windows/macOS</a>, <a href="https://github.com/mklement0/n-install#" title="">linux/WSL</a>.</li>
-<li>install python: <a href="https://www.python.org/downloads/#" title="">windows/macOS</a>, <a href="https://docs.python-guide.org/starting/install3/linux/#" title="">linux/WSL</a>.</li>
-<li>reboot.</li>
-<li>in the appropriate terminal/command line, run <code>npm install -g asar</code> (check installation by running <code>asar</code>).</li>
-<li><a href="https://github.com/dragonwocky/notion-enhancer/archive/master.zip#" title="">download this enhancer</a> &amp; extract
-to a location it can safely remain (if running the script from the WSL, make sure this is from a location within the windows filesystem).</li>
-<li>ensure no notion processes are running - you may want to check the task manager to make sure.</li>
-<li>optional: to remove previous applications of the notion enhancer, run <code>cleaner.py</code>.</li>
-<li>optional: modify the <code>resources/user.css</code> file to your liking (see <a href="#styling" title="">styling</a>).</li>
-<li>run <code>customiser.py</code> to build changes. (for linux run with sudo)</li>
-</ol>
-<p>done: run notion and enjoy.</p>
-
-          </section>
-          <section class="block" id="faq">
-            <h2>
-              <a href="#faq">faq</a>
-            </h2>
-        <p><strong>now the notion app won&#39;t open :(</strong></p>
-<ol>
-<li>kill any notion tasks in the task manager (<code>ctrl+shift+esc</code>).</li>
-<li>run <code>cleaner.py</code>.</li>
-<li>reboot.</li>
-<li>follow instructions above (ensuring notion <em>isn&#39;t</em> running! again, check task manager).</li>
-</ol>
-<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 terminal or command prompt via e.g. <code>python customiser.py</code>.</p>
-<p><strong>now that I&#39;ve run the script, can I delete the enhancer 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>
-<p><strong>something isn&#39;t working, and the suggestions here haven&#39;t fixed it...</strong></p>
-<p>this is probably a bug. please submit a
-<a href="https://github.com/dragonwocky/notion-enhancer/issues/new?assignees=&labels=bug&template=bug-report.md&title=#" title="">bug report</a>.</p>
-<p><strong>can the enhancer do ___?</strong></p>
-<p>experienced problems with the notion app, or just want to add something a bit more to it? please submit a
-<a href="https://github.com/dragonwocky/notion-enhancer/issues/new?assignees=&labels=enhancement&template=feature-request.md&title=#" title="">feature request</a>.</p>
-
-          </section>
-          <section class="block" id="features">
-            <h2>
-              <a href="#features">features</a>
-            </h2>
-        
-          </section>
-          <section class="block" id="titlebar">
-            <h3>
-              <a href="#titlebar">titlebar</a>
-            </h3>
-        <p>default windows titlebar/frame has been replaced by one more fitting to the theme of the app.</p>
-<p>this includes the addition of an extra button, &quot;always on top&quot;
-symbolised with an arrow. when toggled to point up,
-notion will remain the top visible window even if not focused.</p>
-
-          </section>
-          <section class="block" id="nicer-scrollbars">
-            <h3>
-              <a href="#nicer-scrollbars">nicer scrollbars</a>
-            </h3>
-        <p>i mean, yeah. get rid of those ugly default scrollbars and use nice inconspicuous
-ones that actually look as if they&#39;re part of notion.</p>
-<p>to add these to the web version, copy lines 74 - 105 from <code>user.css</code> into your css customiser.</p>
-<p><img loading="lazy" src="screenshots/app-unenhanced.jpg" alt="" title="">
-<em>image: before enhancement</em></p>
-<p><img loading="lazy" src="screenshots/app-enhanced.jpg" alt="" title="">
-<em>image: after default enhancement</em></p>
-
-          </section>
-          <section class="block" id="hotkeys">
-            <h3>
-              <a href="#hotkeys">hotkeys</a>
-            </h3>
-        <ul>
-<li><strong>reload window</strong>: in addition to the built-in <code>CmdOrCtrl+R</code> reload,
-you can now reload a window with <code>F5</code>.</li>
-<li><strong>toggle all notion windows to/from the tray</strong>: <code>CmdOrCtrl+Shift+A</code> by default.</li>
-</ul>
-<p>to set your own toggle hotkey, open <code>customiser.py</code> and change line 19 (<code>hotkey = &#39;CmdOrCtrl+Shift+A&#39;</code>)
-to your preference. you will need to run or re-run <code>customiser.py</code> afterwards.</p>
-
-          </section>
-          <section class="block" id="tray">
-            <h3>
-              <a href="#tray">tray</a>
-            </h3>
-        <p>single-click to toggle app visibility. right click to open menu.</p>
-<ul>
-<li><strong>run on startup</strong>: run notion on boot/startup. (default: true)</li>
-<li><strong>hide on open</strong>: hide the launch of notion to the tray. (default: false)</li>
-<li><strong>open maximised</strong>: maximize the app on open. (default: false)</li>
-<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>
-<li><strong>load theme.css</strong>: loads the custom colour theme file.
-see <a href="styling.html#colour-theming" title="">colour theming</a> for more information. (default: false)</li>
-<li><strong>use system emoji</strong>: reverts notion to using normal emojis, rather than the twitter emojiset. (default: false)</li>
-</ul>
-<p><img loading="lazy" src="screenshots/app-tray.jpg" alt="" title=""></p>
-<p><em>image: open application tray</em></p>
-
-          </section>
-          <section class="block" id="styling">
-            <h2>
-              <a href="#styling">styling</a>
-            </h2>
-        <p>custom appearances can be applied to the app via the <code>resources/user.css</code> and <code>resources/theme.css</code> files. for more information,
-and a list of various optional styling changes, see <a href="styling.html#" title="">the page on styling</a>.</p>
-
-          </section>
-          <section class="block" id="other-details">
-            <h2>
-              <a href="#other-details">other details</a>
-            </h2>
-        <p>credit where credit is due, this was originally made by Uzver (github: <a href="https://github.com/TarasokUA#" title="">@TarasokUA</a>,
-telegram: <a href="https://t.me/UserFromUkraine#" title="">UserFromUkraine</a>, discord: Uzver#8760).
-he has approved my go-ahead with this fork, as he himself no longer wishes to continue development on the project.</p>
-<p>the notion logo belongs entirely to the notion team, and was sourced from their
-<a href="https://www.notion.so/Media-Kit-205535b1d9c4440497a3d7a2ac096286#" title="">media kit</a>.</p>
-<p>if you have any questions, check <a href="https://dragonwocky.me/#" title="">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>
-</footer><nav><a class="next" href="styling.html">ᐅ</a></nav></article></div></body></html>

docs/styling.html

@@ -1,313 +0,0 @@
-<!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="notion.png" media="(prefers-color-scheme: dark)"><link rel="icon" href="notion.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/notion.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="notion.png" media="(prefers-color-scheme: dark)"><img src="notion.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-2"><a href="#generalapp-wide">general/app-wide</a></li><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-preview">wider page preview</a></li><li class="level-3"><a href="#thinner-cover-image">thinner cover image</a></li><li class="level-2"><a href="#tables">tables</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="#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-2"><a href="#boards">boards</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="#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#" title="">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>.</p>
-
-          </section>
-          <section class="block" id="generalapp-wide">
-            <h2>
-              <a href="#generalapp-wide">general/app-wide</a>
-            </h2>
-        <p><img loading="lazy" src="screenshots/app-enhanced.jpg" alt="" title=""></p>
-<p><em>image: the default post-customisation appearance</em></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="index.html#tray" title="">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>
-<p><img loading="lazy" src="screenshots/theme-dark+.jpg" alt="" title=""></p>
-<p><em>image: the dark+ theme</em></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>
-<p><img loading="lazy" src="screenshots/discussion-default.jpg" alt="" title=""></p>
-<p><em>image: before styling</em></p>
-<p><img loading="lazy" src="screenshots/discussion-hidden.jpg" alt="" title=""></p>
-<p><em>image: after styling</em></p>
-
-          </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>
-<p>to change the fonts, put the relevant URL in the <code>@import</code> statement and then change the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#" title="">font-family</a> property.
-plenty of other fonts that can be found on google fonts or that may be on your system already.</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>
-<p><img loading="lazy" src="screenshots/fonts-custom.jpg" alt="" title=""></p>
-<p><em>image: after styling</em></p>
-
-          </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>
-<p>to change the size, change the value of <code>--font-scale</code>.</p>
-<pre><code class="lang-css"><span class="hljs-selector-pseudo">:root</span> {
-  <span class="hljs-attribute">--font-scale</span>: <span class="hljs-number">1.4</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>
-<p><img loading="lazy" src="screenshots/fonts-resized.jpg" alt="" title=""></p>
-<p><em>image: after styling</em></p>
-
-          </section>
-          <section class="block" id="wider-page-preview">
-            <h3>
-              <a href="#wider-page-preview">wider page preview</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>
-<p><img loading="lazy" src="screenshots/preview-default.jpg" alt="" title=""></p>
-<p><em>image: before styling</em></p>
-<p><img loading="lazy" src="screenshots/preview-wider.jpg" alt="" title=""></p>
-<p><em>image: after styling</em></p>
-
-          </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">12vh</span> <span class="hljs-meta">!important</span>;
-}</code></pre>
-<p><img loading="lazy" src="screenshots/cover-default.jpg" alt="" title=""></p>
-<p><em>image: before styling</em></p>
-<p><img loading="lazy" src="screenshots/cover-thinner.jpg" alt="" title=""></p>
-<p><em>image: after styling</em></p>
-
-          </section>
-          <section class="block" id="tables">
-            <h2>
-              <a href="#tables">tables</a>
-            </h2>
-        <p><img loading="lazy" src="screenshots/table-before.jpg" alt="" title=""></p>
-<p><em>image: before styling</em></p>
-
-          </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 may cause buggy viewing.
-as it is a per-table-column style, unlike all others here, it must be prepended with the block ID and repeated for each column.</p>
-<p>to see how to do this, watch <a href="https://www.youtube.com/watch?v=6V7eqShm_4w#" title="">this video</a>.</p>
-<pre><code class="lang-css"><span class="hljs-selector-attr">[data-block-id^=<span class="hljs-string">'tableID'</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(COL_NUMBER)</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">'tableID'</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(COL_NUMBER)</span>,
-<span class="hljs-selector-attr">[data-block-id^=<span class="hljs-string">'tableID'</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(COL_NUMBER)</span> {
-  <span class="hljs-attribute">width</span>: <span class="hljs-number">32px</span> <span class="hljs-meta">!important</span>;
-}
-<span class="hljs-selector-attr">[data-block-id^=<span class="hljs-string">'tableID'</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>
-<p><img loading="lazy" src="screenshots/table-columnunder100px.jpg" alt="" title=""></p>
-<p><em>image: after styling</em></p>
-
-          </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>
-<p><img loading="lazy" src="screenshots/table-hideaddrow.jpg" alt="" title=""></p>
-<p><em>image: after styling</em></p>
-
-          </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>
-<p><img loading="lazy" src="screenshots/table-hidecalculationsrow.jpg" alt="" title=""></p>
-<p><em>image: after styling</em></p>
-
-          </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>
-<p><img loading="lazy" src="screenshots/table-centredheaders.jpg" alt="" title=""></p>
-<p><em>image: after styling</em></p>
-
-          </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>
-<p><img loading="lazy" src="screenshots/table-smallercolumnicons.jpg" alt="" title=""></p>
-<p><em>image: after styling</em></p>
-
-          </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>
-<p><img loading="lazy" src="screenshots/table-hidecolumnicons.jpg" alt="" title=""></p>
-<p><em>image: after styling</em></p>
-
-          </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>
-<p><img loading="lazy" src="screenshots/table-shrinkpadding.jpg" alt="" title=""></p>
-<p><em>image: after styling</em></p>
-
-          </section>
-          <section class="block" id="boards">
-            <h2>
-              <a href="#boards">boards</a>
-            </h2>
-        <p><img loading="lazy" src="screenshots/board-default.jpg" alt="" title=""></p>
-<p><em>image: before styling</em></p>
-
-          </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>
-<p><img loading="lazy" src="screenshots/board-hideaddnew.jpg" alt="" title=""></p>
-<p><em>image: after styling</em></p>
-
-          </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>
-<p><img loading="lazy" src="screenshots/board-hidehidden.jpg" alt="" title=""></p>
-<p><em>image: after styling</em></p>
-
-          </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>
-<p><img loading="lazy" src="screenshots/board-hideaddgroup.jpg" alt="" title=""></p>
-<p><em>image: after styling</em></p>
-
-          </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>
-<p><img loading="lazy" src="screenshots/board-shrinkpadding.jpg" alt="" title=""></p>
-<p><em>image: after styling</em></p>
-
-    </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>

mods/bracketed-links/mod.js

@@ -0,0 +1,16 @@
+/*
+ * notion-enhancer
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * under the MIT license
+ */
+
+'use strict';
+
+module.exports = {
+  id: '60e14feb-a81d-4ffb-9b12-7585d346bad8',
+  tags: ['extension'],
+  name: 'bracketed links',
+  desc: 'render links surrounded with [[brackets]] instead of __underlined__.',
+  version: '0.1.0',
+  author: 'arecsu',
+};

mods/bracketed-links/styles.css

@@ -0,0 +1,24 @@
+/*
+ * notion-enhancer
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 Arecsu
+ * under the MIT license
+ */
+
+.notion-link-token span {
+  border-bottom: none !important;
+}
+.notion-link-token:before {
+  content: '[[';
+  opacity: 0.7;
+  transition: opacity 100ms ease-in;
+}
+.notion-link-token:after {
+  content: ']]';
+  opacity: 0.7;
+  transition: opacity 100ms ease-in;
+}
+.notion-link-token:hover::before,
+.notion-link-token:hover::after {
+  opacity: 1;
+}

mods/core/buttons.js

@@ -0,0 +1,102 @@
+/*
+ * notion-enhancer
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * under the MIT license
+ */
+
+'use strict';
+
+module.exports = (store) => {
+  const electron = require('electron'),
+    path = require('path'),
+    fs = require('fs-extra'),
+    browser = require('electron').remote.getCurrentWindow(),
+    is_mac = process.platform === 'darwin',
+    buttons = {
+      element: document.createElement('div'),
+      insert: [
+        'alwaysontop',
+        ...(store().frameless && !is_mac
+          ? ['minimize', 'maximize', 'close']
+          : []),
+      ],
+      icons: {
+        raw: {
+          alwaysontop: {
+            on: fs.readFile(
+              path.resolve(`${__dirname}/icons/alwaysontop_on.svg`)
+            ),
+            off: fs.readFile(
+              path.resolve(`${__dirname}/icons/alwaysontop_off.svg`)
+            ),
+          },
+          minimize: fs.readFile(
+            path.resolve(`${__dirname}/icons/minimize.svg`)
+          ),
+          maximize: {
+            on: fs.readFile(path.resolve(`${__dirname}/icons/maximize_on.svg`)),
+            off: fs.readFile(
+              path.resolve(`${__dirname}/icons/maximize_off.svg`)
+            ),
+          },
+          close: fs.readFile(path.resolve(`${__dirname}/icons/close.svg`)),
+        },
+        alwaysontop() {
+          return browser.isAlwaysOnTop()
+            ? buttons.icons.raw.alwaysontop.on
+            : buttons.icons.raw.alwaysontop.off; // '🠙' : '🠛'
+        },
+        minimize() {
+          return buttons.icons.raw.minimize; // '⚊'
+        },
+        maximize() {
+          return browser.isMaximized()
+            ? buttons.icons.raw.maximize.on
+            : buttons.icons.raw.maximize.off; // '🗗' : '🗖'
+        },
+        close() {
+          return buttons.icons.raw.close; // '⨉'
+        },
+      },
+      actions: {
+        async alwaysontop() {
+          browser.setAlwaysOnTop(!browser.isAlwaysOnTop());
+          this.innerHTML = await buttons.icons.alwaysontop();
+        },
+        minimize() {
+          browser.minimize();
+        },
+        async maximize() {
+          browser.isMaximized() ? browser.unmaximize() : browser.maximize();
+          this.innerHTML = await buttons.icons.maximize();
+        },
+        close() {
+          browser.close();
+        },
+      },
+    };
+
+  (async () => {
+    buttons.element.className = 'window-buttons-area';
+    for (let btn of buttons.insert) {
+      buttons.element.innerHTML += `<button class="window-button" id="btn-${btn}">${await buttons.icons[
+        btn
+      ]()}</button>`;
+    }
+    for (let btn of buttons.insert) {
+      document.querySelector(`.window-button#btn-${btn}`).onclick =
+        buttons.actions[btn];
+    }
+    if (store().frameless && !is_mac) {
+      window.addEventListener('resize', (event) => {
+        Promise.resolve(buttons.icons.maximize()).then((icon) => {
+          icon = icon.toString();
+          const el = buttons.element.querySelector('#btn-maximize');
+          if (el.innerHTML != icon) el.innerHTML = icon;
+        });
+      });
+    }
+  })();
+
+  return buttons;
+};

mods/core/client.js

@@ -0,0 +1,147 @@
+/*
+ * notion-enhancer
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 TarasokUA
+ * under the MIT license
+ */
+
+'use strict';
+
+module.exports = (store, __exports) => {
+  const electron = require('electron'),
+    helpers = require('../../pkg/helpers.js'),
+    __notion = helpers.getNotion(),
+    notionIpc = require(`${__notion.replace(
+      /\\/g,
+      '/'
+    )}/app/helpers/notionIpc.js`);
+
+  // additional hotkeys
+  document.defaultView.addEventListener('keyup', (event) => {
+    if (event.code === 'F5') location.reload();
+    if (event.key === 'e' && (event.ctrlKey || event.metaKey))
+      electron.ipcRenderer.send('enhancer:open-extension-menu');
+  });
+
+  const attempt_interval = setInterval(enhance, 500);
+  async function enhance() {
+    if (
+      !document.querySelector('.notion-frame') ||
+      !document.querySelector('.notion-sidebar')
+    )
+      return;
+    clearInterval(attempt_interval);
+
+    // scrollbars
+    if (store().smooth_scrollbars) {
+      document.body.classList.add('smooth-scrollbars');
+      // interval_attempts.patchScrollbars = setInterval(patchScrollbars, 100);
+      // function patchScrollbars() {
+      //   const sidebar = document.querySelector(
+      //     '.notion-scroller.vertical[style*="overflow: hidden auto;"]'
+      //   );
+      //   if (!sidebar) return;
+      //   clearInterval(interval_attempts.patchScrollbars);
+      //   sidebar.style.overflow = '';
+      //   setTimeout(() => {
+      //     sidebar.style.overflow = 'hidden auto';
+      //   }, 10);
+      // }
+    }
+
+    // frameless
+    if (store().frameless) {
+      document.body.classList.add('frameless');
+      // draggable area
+      const dragarea = document.createElement('div');
+      dragarea.className = 'window-dragarea';
+      document.querySelector('.notion-topbar').prepend(dragarea);
+      document.documentElement.style.setProperty(
+        '--configured--dragarea_height',
+        `${store().dragarea_height + 2}px`
+      );
+    }
+
+    // window buttons
+    const buttons = require('./buttons.js')(store);
+    document
+      .querySelector('.notion-topbar > div[style*="display: flex"]')
+      .appendChild(buttons.element);
+    document
+      .querySelector('.notion-history-back-button')
+      .parentElement.nextElementSibling.classList.add(
+        'notion-topbar-breadcrumb'
+      );
+    document
+      .querySelector('.notion-topbar-share-menu')
+      .parentElement.classList.add('notion-topbar-actions');
+
+    const getStyle = (prop) =>
+      getComputedStyle(
+        document.querySelector('.notion-app-inner')
+      ).getPropertyValue(prop);
+
+    // ctrl+f theming
+    document.defaultView.addEventListener('keydown', (event) => {
+      if (event.key === 'f' && (event.ctrlKey || event.metaKey)) {
+        notionIpc.sendNotionToIndex('search:set-theme', {
+          'mode': document.querySelector('.notion-dark-theme')
+            ? 'dark'
+            : 'light',
+          'colors': {
+            'white': getStyle(`--theme--option_active-color`),
+            'blue': getStyle(`--theme--option_active-background`),
+          },
+          'borderRadius': 3,
+          'textColor': getStyle(`--theme--text`),
+          'popoverBackgroundColor': getStyle(`--theme--card`),
+          'popoverBoxShadow': `0 0 0 1px ${getStyle(
+            `--theme--overlay`
+          )}, 0 3px 6px ${getStyle(`--theme--overlay`)}`,
+          'inputBoxShadow': `box-shadow: ${getStyle(
+            `--theme--primary`
+          )} 0px 0px 0px 1px inset, ${getStyle(
+            `--theme--primary_hover`
+          )} 0px 0px 0px 2px !important`,
+          'inputBackgroundColor': getStyle(`--theme--main`),
+          'dividerColor': getStyle(`--theme--table-border`),
+          'shadowOpacity': 0.2,
+        });
+      }
+    });
+
+    // enhancer menu
+    function setMenuTheme() {
+      electron.ipcRenderer.send('enhancer:set-menu-theme', {
+        mode: document.querySelector('.notion-dark-theme') ? 'dark' : 'light',
+        rules: require('./css/variables.json').map((rule) => [
+          rule,
+          getStyle(rule),
+        ]),
+      });
+    }
+    setMenuTheme();
+    electron.ipcRenderer.on('enhancer:get-menu-theme', setMenuTheme);
+
+    const observer = new MutationObserver(setSidebarWidth);
+    observer.observe(document.querySelector('.notion-sidebar'), {
+      attributes: true,
+    });
+    let sidebar_width;
+    function setSidebarWidth(list, observer) {
+      if (!store().frameless) return;
+      const new_sidebar_width =
+        list[0].target.style.height === 'auto'
+          ? '0px'
+          : list[0].target.style.width;
+      if (new_sidebar_width !== sidebar_width) {
+        sidebar_width = new_sidebar_width;
+        electron.ipcRenderer.sendToHost(
+          'enhancer:sidebar-width',
+          sidebar_width
+        );
+      }
+    }
+    setSidebarWidth([{ target: document.querySelector('.notion-sidebar') }]);
+  }
+};

mods/core/create.js

@@ -0,0 +1,86 @@
+/*
+ * notion-enhancer
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 TarasokUA
+ * under the MIT license
+ */
+
+'use strict';
+
+module.exports = (store, __exports) => {
+  const electron = require('electron'),
+    allWindows = () =>
+      electron.BrowserWindow.getAllWindows().filter(
+        (win) => win.getTitle() !== 'notion-enhancer menu'
+      ),
+    // createWindow = __exports.createWindow,
+    path = require('path'),
+    helpers = require('../../pkg/helpers.js'),
+    __notion = helpers.getNotion();
+
+  __exports.createWindow = function (relativeUrl, focused_window) {
+    if (!relativeUrl) relativeUrl = '';
+    const window_state = require(`${__notion.replace(
+        /\\/g,
+        '/'
+      )}/app/node_modules/electron-window-state/index.js`)({
+        defaultWidth: 1320,
+        defaultHeight: 860,
+      }),
+      rect = {
+        x: window_state.x,
+        y: window_state.y,
+        width: window_state.width,
+        height: window_state.height,
+      };
+    focused_window =
+      focused_window || electron.BrowserWindow.getFocusedWindow();
+    if (focused_window && !focused_window.isMaximized()) {
+      rect.x = focused_window.getPosition()[0] + 20;
+      rect.y = focused_window.getPosition()[1] + 20;
+      rect.width = focused_window.getSize()[0];
+      rect.height = focused_window.getSize()[1];
+    }
+    const window = new electron.BrowserWindow({
+      show: false,
+      backgroundColor: '#ffffff',
+      titleBarStyle: 'hiddenInset',
+      frame: !store().frameless,
+      webPreferences: {
+        preload: path.resolve(`${__notion}/app/renderer/index.js`),
+        webviewTag: true,
+        session: electron.session.fromPartition('persist:notion'),
+      },
+      ...rect,
+    });
+    window.once('ready-to-show', function () {
+      if (
+        !store().openhidden ||
+        allWindows().some((win) => win.isVisible() && win.id != window.id)
+      ) {
+        window.show();
+        window.focus();
+        if (store().maximized) window.maximize();
+        if (
+          (focused_window && focused_window.isFullScreen()) ||
+          window_state.isFullScreen
+        )
+          window.setFullScreen(true);
+      }
+    });
+    let intended_quit = false;
+    window.on('close', (e) => {
+      if (intended_quit || !store().close_to_tray || allWindows().length > 1) {
+        window_state.saveState(window);
+        window = null;
+      } else {
+        e.preventDefault();
+        window.hide();
+      }
+    });
+    electron.app.on('before-quit', () => (intended_quit = true));
+    window.loadURL(__exports.getIndexUrl(relativeUrl));
+    return window;
+  };
+  return __exports.createWindow;
+};

mods/core/css/buttons.css

@@ -0,0 +1,45 @@
+/*
+ * notion-enhancer
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 TarasokUA
+ * under the MIT license
+ */
+
+.window-buttons-area {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+}
+.window-button {
+  background: transparent;
+  border: 0;
+  margin: 0px 0px 0px 9px;
+  width: 32px;
+  line-height: 26px;
+  border-radius: 4px;
+  font-size: 16px;
+  transition: background 0.2s;
+  cursor: default;
+}
+.window-button svg {
+  margin-top: 8px;
+  width: 14px;
+  height: 14px;
+}
+.window-button svg path {
+  fill: currentColor;
+}
+.window-button svg line {
+  stroke: currentColor;
+}
+
+.window-button:hover {
+  background: var(--theme--interactive_hover);
+  box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border);
+}
+.window-button#btn-close:hover {
+  background: var(--theme--button_close);
+}
+.window-button#btn-close:hover svg line {
+  stroke: var(--theme--button_close-fill);
+}

mods/core/css/dark.css

@@ -0,0 +1,316 @@
+/*
+ * notion-enhancer
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 TarasokUA
+ * (c) 2020 Arecsu
+ * (c) 2020 u/zenith_illinois
+ * under the MIT license
+ */
+
+/** general ui **/
+
+.dark [style*='background: rgb(55, 60, 63)'],
+.dark [style*='background: rgba(69, 75, 78, 0.3)'],
+.dark [style*='background: rgb(120, 123, 123)'] {
+  background: var(--theme--sidebar) !important;
+}
+.notion-body.dark,
+.dark [style*='background: rgb(47, 52, 55)'],
+.dark [style*='background-color: rgb(47, 52, 55)'] {
+  background: var(--theme--main) !important;
+}
+
+.dark
+  .notion-peek-renderer
+  .notion-scroller.vertical
+  [style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;'],
+.dark
+  .notion-peek-renderer
+  .notion-scroller.vertical
+  [style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;']
+  img {
+  height: var(--theme--preview_banner-height) !important;
+}
+.dark
+  [style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'],
+.dark
+  [style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;']
+  img {
+  height: var(--theme--page_banner-height) !important;
+}
+
+/** databases **/
+
+.dark [style*='background: rgb(63, 68, 71)'],
+.dark [style*='background-color: rgb(64, 68, 71);'] {
+  background: var(--theme--card) !important;
+}
+.dark
+  .notion-page-content
+  .notion-page-block.notion-collection-item
+  [style*='background: rgba(255, 255, 255, 0.05)'] {
+  background: var(--theme--gallery) !important;
+}
+
+.dark
+  [style*='box-shadow: rgba(15, 15, 15, 0.2) 0px 0px 0px 1px, rgba(15, 15, 15, 0.2) 0px 2px 4px'] {
+  box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px,
+    rgba(15, 15, 15, 0.1) 0px 2px 4px !important;
+}
+
+.dark [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px'] {
+  box-shadow: var(--theme--main) -3px 0px 0px !important;
+}
+.dark
+  [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px, rgba(255, 255, 255, 0.14) 0px 1px 0px'] {
+  box-shadow: var(--theme--main) -3px 0px 0px,
+    var(--theme--table-border) 0px 1px 0px !important;
+}
+
+.dark [style*='border-top: 1px solid rgba(255, 255, 255,'] {
+  border-top: 1px solid var(--theme--table-border) !important;
+}
+.dark [style*='box-shadow: rgba(255, 255, 255, 0.14) -1px 0px 0px'] {
+  box-shadow: var(--theme--table-border) -1px 0px 0px !important;
+}
+.dark [style*='border-bottom: 1px solid rgba(255, 255, 255,'] {
+  border-bottom: 1px solid var(--theme--table-border) !important;
+}
+.dark [style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px'] {
+  box-shadow: var(--theme--table-border) 0px 1px 0px !important;
+}
+.dark [style*='border-right: 1px solid rgba(255, 255, 255,'] {
+  border-right: 1px solid var(--theme--table-border) !important;
+}
+.dark [style*='box-shadow: rgba(255, 255, 255, 0.07) 0px -1px 0px'],
+.dark [style*='box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px'] {
+  box-shadow: var(--theme--table-border) 0px -1px 0px !important;
+}
+.dark [style*='border-left: 1px solid rgba(255, 255, 255,'],
+.dark
+  .notion-block-permission-settings-public-access
+  [role='button'][style*='border-left: none'] {
+  border-left: 1px solid var(--theme--table-border) !important;
+}
+.dark [style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px inset'] {
+  box-shadow: var(--theme--table-border) 0px 1px 0px inset !important;
+}
+.dark [style*='box-shadow: rgba(255, 255, 255, 0.14) 1px 0px 0px inset'] {
+  box-shadow: var(--theme--table-border) 1px 0px 0px inset !important;
+}
+
+.dark
+  [style*='background-image: linear-gradient(to right, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.14) 100%);'] {
+  background-image: linear-gradient(
+    to right,
+    var(--theme--bg_gray) 0%,
+    var(--theme--bg_gray) 100%
+  ) !important;
+}
+
+.dark [style*='background: rgb(71, 76, 80)'],
+.dark [style*='background: rgb(80, 85, 88)'],
+.dark [style*='background: rgb(98, 102, 104)'] {
+  background: var(--theme--interactive_hover) !important;
+  box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border) !important;
+}
+
+/** ui colours **/
+
+.dark ::selection,
+.dark
+  [style*='background: rgba(46, 170, 220,']:not([style*='background: rgba(46, 170, 220, 0)']),
+.dark
+  [style*='background-color: rgba(46, 170, 220,']:not([style*='background-color: rgba(46, 170, 220, 0)']) {
+  background: var(--theme--selected) !important;
+}
+
+.dark [style*='color: rgb(46, 170, 220)'] {
+  color: var(--theme--primary) !important;
+}
+.dark [style*='fill: rgb(46, 170, 220)'] {
+  fill: var(--theme--primary) !important;
+}
+.dark [style*='background: rgb(46, 170, 220)'],
+.dark [style*='background-color: rgb(46, 170, 220)'] {
+  background: var(--theme--primary) !important;
+}
+.dark [style*='box-shadow: rgb(46, 170, 220) 0px 0px 0px 2px inset'] {
+  box-shadow: var(--theme--primary) 0px 0px 0px 2px inset !important;
+}
+.dark [style*='background: rgb(6, 156, 205)'] {
+  background: var(--theme--primary_hover) !important;
+}
+.dark [style*='background: rgb(0, 141, 190)'] {
+  background: var(--theme--primary_click) !important;
+}
+.dark
+  .DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end)::after,
+.dark [style*='background: rgb(235, 87, 87)'] {
+  background: var(--theme--primary_indicator) !important;
+}
+
+.dark
+  [style*='color: rgb(235, 87, 87); border: 1px solid rgba(235, 87, 87, 0.5);'] {
+  color: var(--theme--danger_text) !important;
+  border: 1px solid var(--theme--danger_border) !important;
+}
+
+/* content colours */
+
+.dark,
+.dark .notion-page-content [style*='color: inherit;'],
+.dark .notion-frame .notion-page-block,
+.dark [style*='color: rgba(255, 255, 255, 0.9)'],
+.dark [style*='color: rgba(255, 255, 255, 0.7)'] {
+  color: var(--theme--text) !important;
+}
+.dark [style*='color: rgba(255, 255, 255, 0.6)'] {
+  color: var(--theme--text_ui) !important;
+}
+.dark [style*='color: rgba(255, 255, 255, 0.4)'] {
+  color: var(--theme--text_ui_info) !important;
+}
+.dark [style*='fill: rgb(202, 204, 206)'] {
+  fill: var(--theme--text) !important;
+}
+.dark [style*='fill: rgba(202, 204, 206,'] {
+  fill: var(--theme--text_ui) !important;
+}
+
+.dark [style*='color:rgba(151,154,155,0.95)'] {
+  color: var(--theme--text_gray) !important;
+}
+.dark [style*='background: rgba(151, 154, 155, 0.5)'],
+.dark [style*='background:rgb(69,75,78)'] {
+  background: var(--theme--bg_gray) !important;
+  color: var(--theme--bg_text) !important;
+}
+.dark [style*='background: rgb(69, 75, 78)'] {
+  background: var(--theme--line_gray) !important;
+}
+.dark [style*='color:rgb(147,114,100)'] {
+  color: var(--theme--text_brown) !important;
+}
+.dark [style*='background: rgba(147, 114, 100, 0.5)'],
+.dark [style*='background:rgb(67,64,64)'] {
+  background: var(--theme--bg_brown) !important;
+  color: var(--theme--bg_text) !important;
+}
+.dark [style*='background: rgb(67, 64, 64)'] {
+  background: var(--theme--line_brown) !important;
+}
+.dark [style*='color:rgb(255,163,68)'] {
+  color: var(--theme--text_orange) !important;
+}
+.dark [style*='background: rgba(255, 163, 68, 0.5)'],
+.dark [style*='background:rgb(89,74,58)'] {
+  background: var(--theme--bg_orange) !important;
+  color: var(--theme--bg_text) !important;
+}
+.dark [style*='background: rgb(89, 74, 58)'] {
+  background: var(--theme--line_orange) !important;
+}
+.dark [style*='color:rgb(255,220,73)'] {
+  color: var(--theme--text_yellow) !important;
+}
+.dark [style*='background: rgba(255, 220, 73, 0.5)'],
+.dark [style*='background:rgb(89,86,59)'] {
+  background: var(--theme--bg_yellow) !important;
+  color: var(--theme--bg_text) !important;
+}
+.dark [style*='background: rgb(89, 86, 59)'] {
+  background: var(--theme--line_yellow) !important;
+}
+.dark [style*='color:rgb(77,171,154)'] {
+  color: var(--theme--text_green) !important;
+}
+.dark [style*='background: rgba(77, 171, 154, 0.5)'],
+.dark [style*='background:rgb(53,76,75)'] {
+  background: var(--theme--bg_green) !important;
+  color: var(--theme--bg_text) !important;
+}
+.dark [style*='background: rgb(53, 76, 75)'] {
+  background: var(--theme--line_green) !important;
+}
+.dark [style*='color:rgb(82,156,202)'] {
+  color: var(--theme--text_blue) !important;
+}
+.dark [style*='background: rgba(82, 156, 202, 0.5)'],
+.dark [style*='background:rgb(54,73,84)'] {
+  background: var(--theme--bg_blue) !important;
+  color: var(--theme--bg_text) !important;
+}
+.dark [style*='background: rgb(54, 73, 84)'] {
+  background: var(--theme--line_blue) !important;
+}
+.dark [style*='color:rgb(154,109,215)'] {
+  color: var(--theme--text_purple) !important;
+}
+.dark [style*='background: rgba(154, 109, 215, 0.5)'],
+.dark [style*='background:rgb(68,63,87)'] {
+  background: var(--theme--bg_purple) !important;
+  color: var(--theme--bg_text) !important;
+}
+.dark [style*='background: rgb(68, 63, 87)'] {
+  background: var(--theme--line_purple) !important;
+}
+.dark [style*='color:rgb(226,85,161)'] {
+  color: var(--theme--text_pink) !important;
+}
+.dark [style*='background: rgba(226, 85, 161, 0.5)'],
+.dark [style*='background:rgb(83,59,76)'] {
+  background: var(--theme--bg_pink) !important;
+  color: var(--theme--bg_text) !important;
+}
+.dark [style*='background: rgb(83, 59, 76)'] {
+  background: var(--theme--line_pink) !important;
+}
+.dark [style*='color:rgb(255,115,105)'] {
+  color: var(--theme--text_red) !important;
+}
+.dark [style*='background: rgba(255, 115, 105, 0.5);'],
+.dark [style*='background:rgb(89,65,65)'] {
+  background: var(--theme--bg_red) !important;
+  color: var(--theme--bg_text) !important;
+}
+.dark [style*='background: rgb(89, 65, 65)'] {
+  background: var(--theme--line_red) !important;
+}
+
+.dark
+  [style*='background: rgb(69, 75, 78)']
+  [style*='color: rgba(255, 255, 255, 0.9)'],
+.dark
+  [style*='background: rgb(67, 64, 64)']
+  [style*='color: rgba(255, 255, 255, 0.9)'],
+.dark
+  [style*='background: rgb(89, 74, 58)']
+  [style*='color: rgba(255, 255, 255, 0.9)'],
+.dark
+  [style*='background: rgb(89, 86, 59)']
+  [style*='color: rgba(255, 255, 255, 0.9)'],
+.dark
+  [style*='background: rgb(53, 76, 75)']
+  [style*='color: rgba(255, 255, 255, 0.9)'],
+.dark
+  [style*='background: rgb(54, 73, 84)']
+  [style*='color: rgba(255, 255, 255, 0.9)'],
+.dark
+  [style*='background: rgb(68, 63, 87)']
+  [style*='color: rgba(255, 255, 255, 0.9)'],
+.dark
+  [style*='background: rgb(83, 59, 76)']
+  [style*='color: rgba(255, 255, 255, 0.9)'],
+.dark
+  [style*='background: rgb(89, 65, 65)']
+  [style*='color: rgba(255, 255, 255, 0.9)'] {
+  color: var(--theme--line_text) !important;
+}
+
+/* code */
+
+.dark [style*='color:#EB5757'] {
+  color: var(--theme--code_inline-text) !important;
+  background: var(--theme--code_inline-background) !important;
+}

mods/core/css/light.css

@@ -0,0 +1,337 @@
+/*
+ * notion-enhancer
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 TarasokUA
+ * (c) 2020 Arecsu
+ * (c) 2020 u/zenith_illinois
+ * under the MIT license
+ */
+
+/** general ui **/
+
+.notion-body:not(.dark) [style*='background: rgb(247, 246, 243)'],
+.notion-body:not(.dark) [style*='background: rgba(235, 236, 237, 0.3)'],
+.notion-body:not(.dark) [style*='background: rgb(223, 223, 222)'] {
+  background: var(--theme--sidebar) !important;
+}
+.notion-body:not(.dark),
+.notion-body:not(.dark)
+  [style*='background: white']:not(.notion-help-button):not([style*='box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;']),
+.notion-body:not(.dark) [style*='background-color: white'] {
+  background: var(--theme--main) !important;
+}
+
+.notion-body:not(.dark) [style*='background: rgba(15, 15, 15, 0.6)'] {
+  background: var(--theme--overlay) !important;
+}
+
+.notion-body:not(.dark)
+  .notion-peek-renderer
+  .notion-scroller.vertical
+  [style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;'],
+.notion-body:not(.dark)
+  .notion-peek-renderer
+  .notion-scroller.vertical
+  [style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;']
+  img {
+  height: var(--theme--preview_banner-height) !important;
+}
+.notion-body:not(.dark)
+  [style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'],
+.notion-body:not(.dark)
+  [style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;']
+  img {
+  height: var(--theme--page_banner-height) !important;
+}
+
+/** databases **/
+
+.notion-body:not(.dark)
+  .notion-scroller.horizontal.vertical
+  .notion-selectable
+  > a[style*='background: white'],
+.notion-body:not(.dark) [style*='background: rgb(247, 246, 243)'],
+.notion-body:not(.dark)
+  [style*='box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;'] {
+  background: var(--theme--card) !important;
+}
+.notion-body:not(.dark)
+  .notion-page-content
+  .notion-page-block.notion-collection-item
+  [style*='background: rgba(55, 53, 47, 0.024)'] {
+  background: var(--theme--gallery) !important;
+}
+
+.notion-body:not(.dark) [style*='box-shadow: white -3px 0px 0px'] {
+  box-shadow: var(--theme--main) -3px 0px 0px !important;
+}
+.notion-body:not(.dark)
+  [style*='box-shadow: white -3px 0px 0px, rgba(55, 53, 47, 0.16) 0px 1px 0px'],
+.notion-body:not(.dark)
+  [style*='box-shadow: rgba(255, 255, 255, 0.07) 0px -1px 0px'] {
+  box-shadow: var(--theme--main) -3px 0px 0px,
+    var(--theme--table-border) 0px 1px 0px !important;
+}
+
+.notion-body:not(.dark) [style*='border-top: 1px solid rgba(55, 53, 47,'] {
+  border-top: 1px solid var(--theme--table-border) !important;
+}
+.notion-body:not(.dark)
+  [style*='box-shadow: rgba(55, 53, 47, 0.09) -1px 0px 0px'],
+.notion-body:not(.dark)
+  [style*='box-shadow: rgba(55, 53, 47, 0.16) -1px 0px 0px'] {
+  box-shadow: -1px -1px 0 var(--theme--table-border) !important;
+}
+.notion-body:not(.dark)
+  [style*='box-shadow: rgba(55, 53, 47, 0.16) 0px 1px 0px'] {
+  box-shadow: 0px 1px 0 var(--theme--table-border) !important;
+}
+.notion-body:not(.dark) [style*='border-bottom: 1px solid rgba(55, 53, 47,'] {
+  border-bottom: 1px solid var(--theme--table-border) !important;
+}
+.notion-body:not(.dark)
+  [style*='box-shadow: rgba(55, 53, 47, 0.09) 0px 1px 0px'] {
+  box-shadow: var(--theme--table-border) 0px 1px 0px !important;
+}
+.notion-body:not(.dark) [style*='border-right: 1px solid rgba(55, 53, 47,'] {
+  border-right: 1px solid var(--theme--table-border) !important;
+}
+.notion-body:not(.dark)
+  [style*='box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px'] {
+  box-shadow: var(--theme--table-border) 0px -1px 0px !important;
+}
+.notion-body:not(.dark) [style*='border-left: 1px solid rgba(55, 53, 47,'] {
+  border-left: 1px solid var(--theme--table-border) !important;
+}
+.notion-body:not(.dark)
+  [style*='box-shadow: rgba(55, 53, 47, 0.16) 0px 1px 0px inset'] {
+  box-shadow: var(--theme--table-border) 0px 1px 0px inset !important;
+}
+.notion-body:not(.dark)
+  [style*='box-shadow: rgba(55, 53, 47, 0.16) 1px 0px 0px inset'] {
+  box-shadow: var(--theme--table-border) 1px 0px 0px inset !important;
+}
+
+.notion-body:not(.dark)
+  [style*='background-image: linear-gradient(to right, rgba(55, 53, 47, 0.16) 0%, rgba(55, 53, 47, 0.16) 100%)'] {
+  background-image: linear-gradient(
+    to right,
+    var(--theme--bg_gray) 0%,
+    var(--theme--bg_gray) 100%
+  ) !important;
+}
+
+.notion-body:not(.dark) [style*='background: rgba(55, 53, 47,'],
+.notion-body:not(.dark) [style*='background: rgb(239, 239, 238)'],
+.notion-body:not(.dark) [style*='background: rgba(206, 205, 202, 0.5)'] {
+  background: var(--theme--interactive_hover) !important;
+  box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border) !important;
+}
+
+/** ui colours **/
+
+.notion-body:not(.dark) ::selection,
+.notion-body:not(.dark)
+  [style*='background: rgba(46, 170, 220,']:not([style*='background: rgba(46, 170, 220, 0)']),
+.notion-body:not(.dark)
+  [style*='background-color: rgba(46, 170, 220,']:not([style*='background-color: rgba(46, 170, 220, 0)']) {
+  background: var(--theme--selected) !important;
+}
+
+.notion-body:not(.dark) [style*='color: rgb(46, 170, 220)'] {
+  color: var(--theme--primary) !important;
+}
+.notion-body:not(.dark) [style*='fill: rgb(46, 170, 220)'] {
+  fill: var(--theme--primary) !important;
+}
+.notion-body:not(.dark) [style*='background: rgb(46, 170, 220)'],
+.notion-body:not(.dark) [style*='background-color: rgb(46, 170, 220)'] {
+  background: var(--theme--primary) !important;
+}
+.notion-body:not(.dark)
+  [style*='box-shadow: rgb(46, 170, 220) 0px 0px 0px 2px inset'] {
+  box-shadow: var(--theme--primary) 0px 0px 0px 2px inset !important;
+}
+.notion-body:not(.dark) [style*='background: rgb(6, 156, 205)'] {
+  background: var(--theme--primary_hover) !important;
+}
+.notion-body:not(.dark) [style*='background: rgb(0, 141, 190)'] {
+  background: var(--theme--primary_click) !important;
+}
+.notion-body:not(.dark)
+  .DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end)::after,
+.notion-body:not(.dark) [style*='background: rgb(235, 87, 87)'] {
+  background: var(--theme--primary_indicator) !important;
+}
+
+.notion-body:not(.dark) .notion-to_do-block .checkboxSquare {
+  background: var(--theme--option-background) !important;
+}
+.notion-body:not(.dark) .notion-to_do-block .checkboxSquare path {
+  fill: var(--theme--option-color) !important;
+}
+
+.notion-body:not(.dark)
+  [style*='color: rgb(235, 87, 87); border: 1px solid rgba(235, 87, 87, 0.5);'] {
+  color: var(--theme--danger_text) !important;
+  border: 1px solid var(--theme--danger_border) !important;
+}
+
+/* content colours */
+
+.notion-body:not(.dark),
+.notion-body:not(.dark) .notion-page-content [style*='color: inherit;'],
+.notion-body:not(.dark) .notion-frame .notion-page-block,
+.notion-body:not(.dark) [style*='color: rgb(55, 53, 47);'] {
+  color: var(--theme--text) !important;
+}
+.notion-body:not(.dark) [style*='color: rgba(55, 53, 47, 0.6)'],
+.notion-body:not(.dark) [style*='color: rgba(25, 23, 17, 0.6)'] {
+  color: var(--theme--text_ui) !important;
+}
+.notion-body:not(.dark) [style*='color: rgba(55, 53, 47, 0.4)'] {
+  color: var(--theme--text_ui_info) !important;
+}
+.notion-body:not(.dark) [style*='fill: rgba(55, 53, 47,'] {
+  fill: var(--theme--text_ui) !important;
+}
+.notion-body:not(.dark) [style*='fill: rgba(55, 53, 47, 0.8)'] {
+  fill: var(--theme--text) !important;
+}
+
+.notion-body:not(.dark) [style*='color:rgb(155,154,151)'] {
+  color: var(--theme--text_gray) !important;
+}
+.notion-body:not(.dark) [style*='background: rgba(140, 46, 0, 0.2)'],
+.notion-body:not(.dark) [style*='background:rgb(235,236,237)'] {
+  background: var(--theme--bg_gray) !important;
+  color: var(--theme--bg_text) !important;
+}
+.notion-body:not(.dark) [style*='background: rgb(235, 236, 237)'] {
+  background: var(--theme--line_gray) !important;
+}
+.notion-body:not(.dark) [style*='color:rgb(100,71,58)'] {
+  color: var(--theme--text_brown) !important;
+}
+.notion-body:not(.dark) [style*='background: rgba(140, 46, 0, 0.2)'],
+.notion-body:not(.dark) [style*='background:rgb(233,229,227)'] {
+  background: var(--theme--bg_brown) !important;
+  color: var(--theme--bg_text) !important;
+}
+.notion-body:not(.dark) [style*='background: rgb(233, 229, 227)'] {
+  background: var(--theme--line_brown) !important;
+}
+.notion-body:not(.dark) [style*='color:rgb(217,115,13)'] {
+  color: var(--theme--text_orange) !important;
+}
+.notion-body:not(.dark) [style*='background: rgba(245, 93, 0, 0.2)'],
+.notion-body:not(.dark) [style*='background:rgb(250,235,221)'] {
+  background: var(--theme--bg_orange) !important;
+  color: var(--theme--bg_text) !important;
+}
+.notion-body:not(.dark) [style*='background: rgb(250, 235, 221)'] {
+  background: var(--theme--line_orange) !important;
+}
+.notion-body:not(.dark) [style*='color:rgb(223,171,1)'] {
+  color: var(--theme--text_yellow) !important;
+}
+.notion-body:not(.dark) [style*='background: rgba(233, 168, 0, 0.2)'],
+.notion-body:not(.dark) [style*='background:rgb(251,243,219)'] {
+  background: var(--theme--bg_yellow) !important;
+  color: var(--theme--bg_text) !important;
+}
+.notion-body:not(.dark) [style*='background: rgb(251, 243, 219)'] {
+  background: var(--theme--line_yellow) !important;
+}
+.notion-body:not(.dark) [style*='color:rgb(15,123,108)'] {
+  color: var(--theme--text_green) !important;
+}
+.notion-body:not(.dark) [style*='background: rgba(0, 135, 107, 0.2)'],
+.notion-body:not(.dark) [style*='background:rgb(221,237,234)'] {
+  background: var(--theme--bg_green) !important;
+  color: var(--theme--bg_text) !important;
+}
+.notion-body:not(.dark) [style*='background: rgb(221, 237, 234)'] {
+  background: var(--theme--line_green) !important;
+}
+.notion-body:not(.dark) [style*='color:rgb(11,110,153)'] {
+  color: var(--theme--text_blue) !important;
+}
+.notion-body:not(.dark) [style*='background: rgba(0, 120, 223, 0.2)'],
+.notion-body:not(.dark) [style*='background:rgb(221,235,241)'] {
+  background: var(--theme--bg_blue) !important;
+  color: var(--theme--bg_text) !important;
+}
+.notion-body:not(.dark) [style*='background: rgb(221, 235, 241)'] {
+  background: var(--theme--line_blue) !important;
+}
+.notion-body:not(.dark) [style*='color:rgb(105,64,165)'] {
+  color: var(--theme--text_purple) !important;
+}
+.notion-body:not(.dark) [style*='background: rgba(103, 36, 222, 0.2)'],
+.notion-body:not(.dark) [style*='background:rgb(234,228,242)'] {
+  background: var(--theme--bg_purple) !important;
+  color: var(--theme--bg_text) !important;
+}
+.notion-body:not(.dark) [style*='background: rgb(234, 228, 242)'] {
+  background: var(--theme--line_purple) !important;
+}
+.notion-body:not(.dark) [style*='color:rgb(173,26,114)'] {
+  color: var(--theme--text_pink) !important;
+}
+.notion-body:not(.dark) [style*='background: rgba(221, 0, 129, 0.2)'],
+.notion-body:not(.dark) [style*='background:rgb(244,223,235)'] {
+  background: var(--theme--bg_pink) !important;
+  color: var(--theme--bg_text) !important;
+}
+.notion-body:not(.dark) [style*='background: rgb(244, 223, 235)'] {
+  background: var(--theme--line_pink) !important;
+}
+.notion-body:not(.dark) [style*='color:rgb(224,62,62)'] {
+  color: var(--theme--text_red) !important;
+}
+.notion-body:not(.dark) [style*='background: rgba(255, 0, 26, 0.2)'],
+.notion-body:not(.dark) [style*='background:rgb(251,228,228)'] {
+  background: var(--theme--bg_red) !important;
+  color: var(--theme--bg_text) !important;
+}
+.notion-body:not(.dark) [style*='background: rgb(251, 228, 228)'] {
+  background: var(--theme--line_red) !important;
+}
+
+.notion-body:not(.dark)
+  [style*='background: rgb(235, 236, 237)']
+  [style*='color: rgb(55, 53, 47);'],
+.notion-body:not(.dark)
+  [style*='background: rgb(233, 229, 227)']
+  [style*='color: rgb(55, 53, 47);'],
+.notion-body:not(.dark)
+  [style*='background: rgb(250, 235, 221)']
+  [style*='color: rgb(55, 53, 47);'],
+.notion-body:not(.dark)
+  [style*='background: rgb(251, 243, 219)']
+  [style*='color: rgb(55, 53, 47);'],
+.notion-body:not(.dark)
+  [style*='background: rgb(221, 237, 234)']
+  [style*='color: rgb(55, 53, 47);'],
+.notion-body:not(.dark)
+  [style*='background: rgb(221, 235, 241)']
+  [style*='color: rgb(55, 53, 47);'],
+.notion-body:not(.dark)
+  [style*='background: rgb(234, 228, 242)']
+  [style*='color: rgb(55, 53, 47);'],
+.notion-body:not(.dark)
+  [style*='background: rgb(244, 223, 235)']
+  [style*='color: rgb(55, 53, 47);'],
+.notion-body:not(.dark)
+  [style*='background: rgb(251, 228, 228)']
+  [style*='color: rgb(55, 53, 47);'] {
+  color: var(--theme--line_text) !important;
+}
+
+/* code */
+
+.notion-body:not(.dark) [style*='color:#EB5757'] {
+  color: var(--theme--code_inline-text) !important;
+  background: var(--theme--code_inline-background) !important;
+}

mods/core/css/localised.css

@@ -0,0 +1,207 @@
+/*
+ * notion-enhancer
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * under the MIT license
+ */
+
+@import './variables.css';
+
+.notion-dark-theme {
+  --theme--main: var(--theme_dark--main);
+  --theme--sidebar: var(--theme_dark--sidebar);
+  --theme--overlay: var(--theme_dark--overlay);
+  --theme--dragarea: var(--theme_dark--dragarea);
+  --theme--preview-width: var(--theme_dark--preview-width);
+  --theme--preview-padding: var(--theme_dark--preview-padding);
+  --theme--preview_banner-height: var(--theme_dark--preview_banner-height);
+  --theme--page_banner-height: var(--theme_dark--page_banner-height);
+  --theme--font_sans: var(--theme_dark--font_sans);
+  --theme--font_serif: var(--theme_dark--font_serif);
+  --theme--font_mono: var(--theme_dark--font_mono);
+  --theme--font_code: var(--theme_dark--font_code);
+  --theme--font_title-size: var(--theme_dark--font_title-size);
+  --theme--font_heading1-size: var(--theme_dark--font_heading1-size);
+  --theme--font_heading2-size: var(--theme_dark--font_heading2-size);
+  --theme--font_heading3-size: var(--theme_dark--font_heading3-size);
+  --theme--font_label-size: var(--theme_dark--font_label-size);
+  --theme--font_body-size: var(--theme_dark--font_body-size);
+  --theme--font_code-size: var(--theme_dark--font_code-size);
+  --theme--font_sidebar-size: var(--theme_dark--font_sidebar-size);
+  --theme--scrollbar: var(--theme_dark--scrollbar);
+  --theme--scrollbar-border: var(--theme_dark--scrollbar-border);
+  --theme--scrollbar_hover: var(--theme_dark--scrollbar_hover);
+  --theme--card: var(--theme_dark--card);
+  --theme--gallery: var(--theme_dark--gallery);
+  --theme--table-border: var(--theme_dark--table-border);
+  --theme--interactive_hover: var(--theme_dark--interactive_hover);
+  --theme--interactive_hover-border: var(
+    --theme_dark--interactive_hover-border
+  );
+  --theme--button_close: var(--theme_dark--button_close);
+  --theme--button_close-fill: var(--theme_dark--button_close-fill);
+  --theme--selected: var(--theme_dark--selected);
+  --theme--primary: var(--theme_dark--primary);
+  --theme--primary_hover: var(--theme_dark--primary_hover);
+  --theme--primary_click: var(--theme_dark--primary_click);
+  --theme--primary_indicator: var(--theme_dark--primary_indicator);
+  --theme--option-color: var(--theme_dark--option-color);
+  --theme--option-background: var(--theme_dark--option-background);
+  --theme--option_active-color: var(--theme_dark--option_active-color);
+  --theme--option_active-background: var(
+    --theme_dark--option_active-background
+  );
+  --theme--option_hover-color: var(--theme_dark--option_hover-color);
+  --theme--option_hover-background: var(--theme_dark--option_hover-background);
+  --theme--danger_text: var(--theme_dark--danger_text);
+  --theme--danger_border: var(--theme_dark--danger_border);
+  --theme--text: var(--theme_dark--text);
+  --theme--text_ui: var(--theme_dark--text_ui);
+  --theme--text_ui_info: var(--theme_dark--text_ui_info);
+  --theme--text_gray: var(--theme_dark--text_gray);
+  --theme--text_brown: var(--theme_dark--text_brown);
+  --theme--text_orange: var(--theme_dark--text_orange);
+  --theme--text_yellow: var(--theme_dark--text_yellow);
+  --theme--text_green: var(--theme_dark--text_green);
+  --theme--text_blue: var(--theme_dark--text_blue);
+  --theme--text_purple: var(--theme_dark--text_purple);
+  --theme--text_pink: var(--theme_dark--text_pink);
+  --theme--text_red: var(--theme_dark--text_red);
+  --theme--bg_text: var(--theme_dark--bg_text);
+  --theme--bg_gray: var(--theme_dark--bg_gray);
+  --theme--bg_brown: var(--theme_dark--bg_brown);
+  --theme--bg_orange: var(--theme_dark--bg_orange);
+  --theme--bg_yellow: var(--theme_dark--bg_yellow);
+  --theme--bg_green: var(--theme_dark--bg_green);
+  --theme--bg_blue: var(--theme_dark--bg_blue);
+  --theme--bg_purple: var(--theme_dark--bg_purple);
+  --theme--bg_pink: var(--theme_dark--bg_pink);
+  --theme--bg_red: var(--theme_dark--bg_red);
+  --theme--line_text: var(--theme_dark--line_text);
+  --theme--line_gray: var(--theme_dark--line_gray);
+  --theme--line_brown: var(--theme_dark--line_brown);
+  --theme--line_orange: var(--theme_dark--line_orange);
+  --theme--line_yellow: var(--theme_dark--line_yellow);
+  --theme--line_green: var(--theme_dark--line_green);
+  --theme--line_blue: var(--theme_dark--line_blue);
+  --theme--line_purple: var(--theme_dark--line_purple);
+  --theme--line_pink: var(--theme_dark--line_pink);
+  --theme--line_red: var(--theme_dark--line_red);
+  --theme--code_inline-text: var(--theme_dark--code_inline-text);
+  --theme--code_inline-background: var(--theme_dark--code_inline-background);
+  --theme--code_text: var(--theme_dark--code_text);
+  --theme--code-background: var(--theme_dark--code-background);
+  --theme--code_function: var(--theme_dark--code_function);
+  --theme--code_keyword: var(--theme_dark--code_keyword);
+  --theme--code_tag: var(--theme_dark--code_tag);
+  --theme--code_operator: var(--theme_dark--code_operator);
+  --theme--code_important: var(--theme_dark--code_important);
+  --theme--code_property: var(--theme_dark--code_property);
+  --theme--code_builtin: var(--theme_dark--code_builtin);
+  --theme--code_attr-name: var(--theme_dark--code_attr-name);
+  --theme--code_comment: var(--theme_dark--code_comment);
+  --theme--code_punctuation: var(--theme_dark--code_punctuation);
+  --theme--code_doctype: var(--theme_dark--code_doctype);
+  --theme--code_number: var(--theme_dark--code_number);
+  --theme--code_string: var(--theme_dark--code_string);
+  --theme--code_attr-value: var(--theme_dark--code_attr-value);
+}
+
+.notion-light-theme {
+  --theme--main: var(--theme_light--main);
+  --theme--sidebar: var(--theme_light--sidebar);
+  --theme--overlay: var(--theme_light--overlay);
+  --theme--dragarea: var(--theme_light--dragarea);
+  --theme--preview-width: var(--theme_light--preview-width);
+  --theme--preview-padding: var(--theme_light--preview-padding);
+  --theme--preview_banner-height: var(--theme_light--preview_banner-height);
+  --theme--page_banner-height: var(--theme_light--page_banner-height);
+  --theme--font_sans: var(--theme_light--font_sans);
+  --theme--font_serif: var(--theme_light--font_serif);
+  --theme--font_mono: var(--theme_light--font_mono);
+  --theme--font_code: var(--theme_light--font_code);
+  --theme--font_title-size: var(--theme_light--font_title-size);
+  --theme--font_heading1-size: var(--theme_light--font_heading1-size);
+  --theme--font_heading2-size: var(--theme_light--font_heading2-size);
+  --theme--font_heading3-size: var(--theme_light--font_heading3-size);
+  --theme--font_label-size: var(--theme_light--font_label-size);
+  --theme--font_body-size: var(--theme_light--font_body-size);
+  --theme--font_code-size: var(--theme_light--font_code-size);
+  --theme--font_sidebar-size: var(--theme_light--font_sidebar-size);
+  --theme--scrollbar: var(--theme_light--scrollbar);
+  --theme--scrollbar-border: var(--theme_light--scrollbar-border);
+  --theme--scrollbar_hover: var(--theme_light--scrollbar_hover);
+  --theme--card: var(--theme_light--card);
+  --theme--gallery: var(--theme_light--gallery);
+  --theme--table-border: var(--theme_light--table-border);
+  --theme--interactive_hover: var(--theme_light--interactive_hover);
+  --theme--interactive_hover-border: var(
+    --theme_light--interactive_hover-border
+  );
+  --theme--button_close: var(--theme_light--button_close);
+  --theme--button_close-fill: var(--theme_light--button_close-fill);
+  --theme--selected: var(--theme_light--selected);
+  --theme--primary: var(--theme_light--primary);
+  --theme--primary_hover: var(--theme_light--primary_hover);
+  --theme--primary_click: var(--theme_light--primary_click);
+  --theme--primary_indicator: var(--theme_light--primary_indicator);
+  --theme--option-color: var(--theme_light--option-color);
+  --theme--option-background: var(--theme_light--option-background);
+  --theme--option_hover-color: var(--theme_light--option_hover-color);
+  --theme--option_hover-background: var(--theme_light--option_hover-background);
+  --theme--option_active-color: var(--theme_light--option_active-color);
+  --theme--option_active-background: var(
+    --theme_light--option_active-background
+  );
+  --theme--danger_text: var(--theme_light--danger_text);
+  --theme--danger_border: var(--theme_light--danger_border);
+  --theme--text: var(--theme_light--text);
+  --theme--text_ui: var(--theme_light--text_ui);
+  --theme--text_ui_info: var(--theme_light--text_ui_info);
+  --theme--text_gray: var(--theme_light--text_gray);
+  --theme--text_brown: var(--theme_light--text_brown);
+  --theme--text_orange: var(--theme_light--text_orange);
+  --theme--text_yellow: var(--theme_light--text_yellow);
+  --theme--text_green: var(--theme_light--text_green);
+  --theme--text_blue: var(--theme_light--text_blue);
+  --theme--text_purple: var(--theme_light--text_purple);
+  --theme--text_pink: var(--theme_light--text_pink);
+  --theme--text_red: var(--theme_light--text_red);
+  --theme--bg_text: var(--theme_light--bg_text);
+  --theme--bg_gray: var(--theme_light--bg_gray);
+  --theme--bg_brown: var(--theme_light--bg_brown);
+  --theme--bg_orange: var(--theme_light--bg_orange);
+  --theme--bg_yellow: var(--theme_light--bg_yellow);
+  --theme--bg_green: var(--theme_light--bg_green);
+  --theme--bg_blue: var(--theme_light--bg_blue);
+  --theme--bg_purple: var(--theme_light--bg_purple);
+  --theme--bg_pink: var(--theme_light--bg_pink);
+  --theme--bg_red: var(--theme_light--bg_red);
+  --theme--line_text: var(--theme_light--line_text);
+  --theme--line_gray: var(--theme_light--line_gray);
+  --theme--line_brown: var(--theme_light--line_brown);
+  --theme--line_orange: var(--theme_light--line_orange);
+  --theme--line_yellow: var(--theme_light--line_yellow);
+  --theme--line_green: var(--theme_light--line_green);
+  --theme--line_blue: var(--theme_light--line_blue);
+  --theme--line_purple: var(--theme_light--line_purple);
+  --theme--line_pink: var(--theme_light--line_pink);
+  --theme--line_red: var(--theme_light--line_red);
+  --theme--code_inline-text: var(--theme_light--code_inline-text);
+  --theme--code_inline-background: var(--theme_light--code_inline-background);
+  --theme--code_text: var(--theme_light--code_text);
+  --theme--code-background: var(--theme_light--code-background);
+  --theme--code_function: var(--theme_light--code_function);
+  --theme--code_keyword: var(--theme_light--code_keyword);
+  --theme--code_tag: var(--theme_light--code_tag);
+  --theme--code_operator: var(--theme_light--code_operator);
+  --theme--code_important: var(--theme_light--code_important);
+  --theme--code_property: var(--theme_light--code_property);
+  --theme--code_builtin: var(--theme_light--code_builtin);
+  --theme--code_attr-name: var(--theme_light--code_attr-name);
+  --theme--code_comment: var(--theme_light--code_comment);
+  --theme--code_punctuation: var(--theme_light--code_punctuation);
+  --theme--code_doctype: var(--theme_light--code_doctype);
+  --theme--code_number: var(--theme_light--code_number);
+  --theme--code_string: var(--theme_light--code_string);
+  --theme--code_attr-value: var(--theme_light--code_attr-value);
+}

mods/core/css/menu.css

@@ -0,0 +1,579 @@
+/*
+ * notion-enhancer
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * under the MIT license
+ */
+
+@import './buttons.css';
+@import './scrollbars.css';
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+* {
+  box-sizing: border-box;
+  word-break: break-word;
+  text-decoration: none;
+  text-size-adjust: 100%;
+  font-family: var(--theme--font_sans);
+  outline-color: var(--theme--table-border);
+}
+html,
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  background: var(--theme--main);
+  color: var(--theme--text);
+}
+
+body:not([style]) > * {
+  display: none !important;
+}
+body:not([style])::after {
+  content: '';
+  position: absolute;
+  left: 44vw;
+  top: calc(50% - 7.5vw);
+  width: 10vw;
+  height: 10vw;
+  border: 4px solid rgb(34, 34, 34);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+main {
+  padding: 1em 1em 2.9em 1em;
+  height: 100%;
+  overflow: auto;
+}
+main section {
+  border-radius: 2px;
+  margin-bottom: 0.75em;
+}
+
+/* inline formatting */
+
+code {
+  border-radius: 0.1em;
+  padding: 0.2em 0.4em;
+  font: 0.85em var(--theme--font_code);
+  /* color: var(--theme--code_inline-text); */
+  background: var(--theme--code_inline-background);
+}
+
+button {
+  color: var(--theme--text);
+}
+
+u {
+  text-decoration: underline;
+}
+s {
+  text-decoration: line-through;
+}
+
+/* titlebar */
+
+#menu-titlebar::before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  -webkit-app-region: no-drag;
+  top: 0;
+  left: 0;
+  height: 2px;
+}
+
+#menu-titlebar {
+  display: flex;
+  padding: 0.4em;
+  -webkit-app-region: drag;
+}
+#menu-titlebar button {
+  -webkit-app-region: no-drag;
+}
+#menu-titlebar :first-child {
+  margin-left: auto;
+}
+#menu-titlebar {
+  background: var(--theme--dragarea);
+}
+
+/* alerts */
+
+#alerts [role='alert'] {
+  display: flex;
+  padding: 0.75em;
+  /* border: 1px solid var(--theme--text_ui_info); */
+}
+#alerts [role='alert']::before {
+  content: '!';
+  display: block;
+  /* margin: auto 0; */
+  font-weight: bold;
+  font-size: 1.2em;
+  padding-right: 0.5rem;
+  color: var(--theme--bg_text);
+}
+#alerts [role='alert'] p {
+  font-size: 1rem;
+  margin: auto 0;
+  padding-left: 0.5em;
+  color: var(--theme--bg_text);
+}
+
+#alerts .error {
+  background: var(--theme--bg_red);
+}
+#alerts .warning {
+  background: var(--theme--bg_yellow);
+}
+#alerts .info {
+  background: var(--theme--bg_blue);
+}
+
+#alerts .success::before {
+  content: '✓';
+}
+#alerts .success {
+  background: var(--theme--bg_green);
+}
+
+[data-relaunch] {
+  text-decoration: underline dotted;
+  cursor: pointer;
+}
+
+/* search */
+
+#search {
+  position: relative;
+  margin-bottom: 0.75em;
+}
+
+#search > svg {
+  position: absolute;
+  width: 1em;
+  height: 1em;
+  top: 1.3em;
+  left: 1em;
+}
+#search > svg path {
+  fill: var(--theme--text_ui_info);
+}
+#search > input {
+  width: 100%;
+  padding: 1em 1.4em 1em 2.8em;
+  font: 1em var(--font);
+  background: var(--theme--card);
+  border: 1px solid var(--theme--table-border);
+  color: var(--theme--text);
+  border-radius: 2px;
+}
+#search > input::placeholder {
+  font-weight: bold;
+  color: var(--theme--text_ui_info);
+}
+#search > input:focus {
+  box-shadow: var(--theme--table-border) 0.04em 0.04em,
+    var(--theme--table-border) -0.04em -0.04em,
+    var(--theme--table-border) -0.04em 0.04em,
+    var(--theme--table-border) 0.04em -0.04em;
+  outline: none;
+}
+
+#search #tags > span {
+  cursor: pointer;
+  display: inline-block;
+  font-size: 0.8em;
+  padding: 0.2em 0.5em;
+  margin-top: 0.5em;
+  background: var(--theme--option-background);
+  color: var(--theme--option-color);
+  border-radius: 2px;
+  transition: color 200ms, background 200ms;
+  user-select: none;
+}
+#search #tags > span:not(:last-child) {
+  margin-right: 0.5em;
+}
+#search #tags > span:hover {
+  background: var(--theme--option_hover-background);
+  color: var(--theme--option_hover-color);
+}
+#search #tags > .selected {
+  background: var(--tag_color, var(--theme--option_active-background));
+  color: var(--theme--option_active-color);
+}
+
+/* module meta */
+
+#modules section {
+  background: var(--theme--sidebar);
+  border: 1px solid var(--theme--table-border);
+}
+#modules section > div {
+  padding: 0.75em;
+}
+.notion-light-theme #modules section {
+  background: var(--theme--main);
+}
+
+#modules section h3,
+#modules section p {
+  margin: 0;
+  font-size: 1rem;
+}
+
+/* #modules section .meta .toggle input + label .switch::before {
+  background: linear-gradient(
+    90deg,
+    var(--theme--text_green),
+    var(--theme--bg_green)
+  );
+}
+#modules section .meta .toggle input + label .switch {
+  background: linear-gradient(
+    90deg,
+    var(--theme--text_red),
+    var(--theme--bg_red)
+  );
+} */
+
+#modules section .desc {
+  margin: 0.3em 0 0.4em 0;
+  font-size: 0.9em;
+}
+#modules section .desc p {
+  font-size: inherit;
+  margin: 0;
+}
+#modules section .desc blockquote {
+  margin: 0.3em 0;
+  border-left: 0.3em solid var(--theme--table-border);
+  padding-left: 0.7em;
+}
+
+#modules section .desc a {
+  color: currentColor;
+  text-decoration: underline dotted;
+}
+
+#modules section .desc img {
+  width: 100%;
+  max-width: 20em;
+  margin: 0.5em 0;
+}
+#modules section .desc :first-child img:first-child {
+  margin-top: 0;
+}
+#modules section .desc :last-child img:last-child {
+  margin-bottom: 0;
+}
+
+#modules section .author {
+  color: currentColor;
+}
+#modules section .author img {
+  max-height: 1em;
+  max-width: 1em;
+  margin-bottom: 0.15625em;
+  display: inline-block;
+  vertical-align: middle;
+  border-radius: 50%;
+}
+#modules section .tags,
+#modules section .version {
+  font-size: 0.85em;
+  color: var(--theme--text_ui);
+}
+
+/* module options */
+
+#modules .disabled .options {
+  display: none;
+}
+#modules section .options {
+  border-top: 1px solid var(--theme--table-border);
+  background: var(--theme--card);
+}
+#modules section .options p {
+  font-size: 0.9em;
+}
+#modules section .options p:not(:last-child) {
+  padding-bottom: 0.5em;
+  border-bottom: 0.5px solid var(--theme--table-border);
+  margin-bottom: 0.5em;
+}
+
+.toggle *,
+.input *,
+.select *,
+.color *,
+.file * {
+  cursor: pointer;
+}
+.select select,
+.input input[type='text'],
+.input input[type='number'],
+.file input[type='file'] + label .choose {
+  width: 100%;
+  margin: 0.25em 0;
+  font-size: 0.9rem;
+  padding: 0.4rem 0.2rem;
+  border: none;
+  color: var(--theme--text);
+  background: var(--theme--main);
+}
+.select select:focus,
+.input input[type='text']:focus,
+.input input[type='number']:focus,
+.file input[type='file']:focus + label .choose,
+.file input[type='file'] + label .choose:hover {
+  outline: var(--theme--table-border) solid 2px;
+}
+.file input[type='file'],
+.toggle input[type='checkbox'] {
+  opacity: 0;
+  width: 0.1px;
+  height: 0.1px;
+  position: fixed;
+}
+
+.input input[type='text'],
+.input input[type='number'] {
+  padding: 0.4rem;
+  cursor: text;
+}
+
+.file input[type='file'] + label .label {
+  position: relative;
+  display: flex;
+}
+.file input[type='file'] + label .label .name {
+  flex-basis: calc(100% - 1.5rem);
+}
+.file input[type='file'] + label .label .clear {
+  font-size: 1rem;
+  position: absolute;
+  top: 0.4em;
+  right: 0;
+  width: 1em;
+  height: 0.1em;
+  border: 0.35em solid var(--theme--card);
+  background: currentColor;
+}
+.file input[type='file'] + label .choose {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.file input[type='file'] + label .choose svg {
+  padding-top: 0.5em;
+  height: 1.25em;
+  width: 1.25em;
+}
+
+.toggle input[type='checkbox'] + label {
+  display: flex;
+}
+.toggle input[type='checkbox'] + label .name {
+  flex-basis: calc(100% - 2.25em);
+}
+.toggle input[type='checkbox'] + label .switch {
+  position: relative;
+  margin-top: 0.5em;
+  float: right;
+  height: 0.65em;
+  width: 2em;
+  background: var(--theme--main);
+  border-radius: 5px;
+  transition: background 300ms;
+}
+.toggle input[type='checkbox'] + label .switch::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: inherit;
+  background: linear-gradient(
+    90deg,
+    var(--theme--primary),
+    var(--theme--primary_click)
+  );
+  opacity: var(--menu--toggle_opacity, 0);
+  transition: opacity 300ms;
+}
+.toggle input[type='checkbox'] + label .switch .dot {
+  position: absolute;
+  width: 1em;
+  height: 1em;
+  top: -0.15em;
+  border-radius: 50%;
+  transform: translateX(var(--menu--toggle_offset, 0));
+  transition: transform 350ms, box-shadow 350ms;
+  background: var(--theme--option_active-color);
+  box-shadow: 2px 1px 4px var(--theme--table-border);
+}
+.toggle input[type='checkbox']:checked:focus + label .switch {
+  background: none !important;
+}
+.toggle input[type='checkbox']:focus + label .switch::before,
+.toggle input[type='checkbox']:focus + label .switch .dot {
+  border: 1px solid var(--theme--table-border);
+}
+.toggle input[type='checkbox']:checked + label {
+  --menu--toggle_offset: 1em;
+  --menu--toggle_opacity: 1;
+}
+
+.color {
+  display: flex;
+}
+.color label {
+  flex-basis: 70%;
+}
+.color input[type='button'] {
+  flex-basis: 30%;
+  box-shadow: 2px 1px 4px var(--theme--table-border);
+  border: 1px solid var(--theme--option_active-color);
+  border-radius: 3px;
+  background: var(--configured--color-value);
+  margin: 0;
+}
+.color input[type='button']:focus {
+  box-shadow: 3px 2px 5px var(--theme--table-border);
+}
+
+/* further-configuration popup */
+
+#popup,
+#popup-overlay {
+  position: absolute;
+  top: 0;
+  height: 100vh;
+  width: 100vw;
+}
+#popup {
+  display: none;
+}
+#popup.visible {
+  display: flex;
+  animation: fade 200ms ease;
+}
+#popup-overlay {
+  background: var(--theme--overlay);
+}
+
+.colorPicker {
+  margin: auto;
+  position: relative;
+  border: 1px solid var(--theme--table-border);
+  background: var(--theme--card);
+}
+
+.colorPicker .twod {
+  border-radius: 4px;
+}
+.colorPicker .twod .bg {
+  border-radius: 2px;
+}
+.colorPicker .oned,
+.colorPicker .oned .bg {
+  margin-left: 0;
+  height: 212.5px;
+}
+.colorPicker .oned .bg {
+  border-radius: 4px;
+  border: 1px solid var(--theme--table-border);
+}
+.colorPicker > button {
+  display: block;
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  width: 21px;
+  height: 20px;
+  cursor: pointer;
+  background: transparent;
+  transition: background 0.2s;
+}
+.colorPicker > button::after {
+  content: '×';
+  font-size: 1.5em;
+  position: relative;
+  bottom: 5px;
+}
+.colorPicker > button:hover {
+  background: var(--theme--interactive_hover);
+  border-radius: 4px;
+  box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border);
+}
+.colorPicker > button:focus {
+  outline: none;
+  box-shadow: 0 0 0 1px var(--theme--table-border);
+}
+.colorPicker .twod .pointer .shape.shape1 {
+  width: 11px;
+  height: 11px;
+}
+.colorPicker .twod .pointer .shape.shape2 {
+  width: 9px;
+  height: 9px;
+}
+.colorPicker .oned .pointer .shape {
+  height: 6.5px;
+  margin-left: 0;
+  border: 2px solid #fff;
+  box-shadow: 0 0 0 1px #000;
+}
+.shape {
+  cursor: pointer;
+}
+
+@media (max-width: 300px) {
+  .colorPicker .twod,
+  .colorPicker .twod .bg {
+    width: 200px;
+    height: 200px;
+  }
+  .colorPicker .oned,
+  .colorPicker .oned .bg {
+    height: 172.5px;
+  }
+}
+@media (max-width: 250px) {
+  .colorPicker .twod,
+  .colorPicker .twod .bg {
+    width: 150px;
+    height: 150px;
+  }
+  .colorPicker .oned,
+  .colorPicker .oned .bg {
+    height: 132.5px;
+  }
+}

mods/core/css/scrollbars.css

@@ -0,0 +1,28 @@
+/*
+ * notion-enhancer
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 TarasokUA
+ * under the MIT license
+ */
+
+.smooth-scrollbars .notion-scroller {
+  cursor: auto;
+}
+.smooth-scrollbars ::-webkit-scrollbar {
+  width: 8px; /* vertical */
+  height: 8px; /* horizontal */
+}
+.smooth-scrollbars ::-webkit-scrollbar-corner {
+  background-color: transparent; /* overlap */
+}
+.smooth-scrollbars ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+}
+
+.smooth-scrollbars ::-webkit-scrollbar-thumb {
+  background-color: var(--theme--scrollbar);
+  border: 1px solid var(--theme--scrollbar-border);
+}
+.smooth-scrollbars ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme--scrollbar_hover);
+}

mods/core/css/shared.css

@@ -0,0 +1,228 @@
+/*
+ * notion-enhancer
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 TarasokUA
+ * (c) 2020 Arecsu
+ * (c) 2020 u/zenith_illinois
+ * under the MIT license
+ */
+
+@import './localised.css';
+
+/* inputs */
+.notion-focusable:focus-within {
+  /* var(--theme--primary) 0px 0px 0px 1px inset, */
+  box-shadow: var(--theme--primary_hover) 0px 0px 0px 2px !important;
+}
+
+/* colour help button - one of the few specific classes notion does give us */
+.notion-help-button {
+  background: var(--theme--interactive_hover) !important;
+  box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border) !important;
+}
+
+/* prevent block hover options overlaying topbar */
+*:not([style*='z-index']) {
+  z-index: 1;
+}
+
+/* fix highlight padding: this isn't a typo */
+[style*='background:rgb('] {
+  padding-bottom: 3px !important;
+}
+
+/* smooth transitions */
+.notion-calendar-view-day,
+.DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end),
+.DayPicker-Day.DayPicker-Day--start.DayPicker-Day--selected,
+.DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day--outside:hover,
+.DayPicker:not(.DayPicker--interactionDisabled)
+  .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end) {
+  transition: all 200ms ease !important;
+}
+.notion-token-remove-button {
+  transition: opacity 200ms ease !important;
+}
+.notion-to_do-block > div > div > div[style*='background:'] {
+  transition: background 200ms ease !important;
+}
+
+/* normalise inline-table size */
+.notion-page-content .notion-collection_view-block {
+  width: 100% !important;
+}
+.notion-page-content
+  .notion-collection_view-block
+  [style*='padding-left: 50px'],
+.notion-page-content
+  .notion-collection_view-block
+  [style*='padding-left: 96px'],
+.notion-page-content
+  .notion-collection_view-block
+  [style*='padding-left: 126px'] {
+  padding-left: 0 !important;
+}
+.notion-page-content
+  .notion-collection_view-block
+  [style*='padding-right: 50px'],
+.notion-page-content
+  .notion-collection_view-block
+  [style*='padding-right: 96px'],
+.notion-page-content
+  .notion-collection_view-block
+  [style*='padding-right: 126px'] {
+  padding-right: 0 !important;
+}
+.notion-page-content
+  .notion-collection_view-block
+  [style*='min-width: calc(100% - 192px);'],
+.notion-page-content
+  .notion-collection_view-block
+  [style*='min-width: 708px;'] {
+  min-width: 100% !important;
+}
+.notion-page-content .notion-collection_view-block > div {
+  padding: 0 1px;
+}
+
+/* fix button resizing */
+.notion-collection_view-block [role='button'],
+.notion-collection_view_page-block [role='button'] {
+  border-width: 0 !important;
+}
+
+/* patch inconsistent padding behaviour in preview */
+.notion-peek-renderer .notion-page-content [style*='max-width: 943px;'] {
+  max-width: none !important;
+}
+.notion-peek-renderer .notion-page-view-discussion > div {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+.notion-peek-renderer .notion-scroller.vertical > div:nth-child(2) > div {
+  padding-left: 15px !important;
+  padding-right: 15px !important;
+}
+
+/* page preview sizing */
+.notion-peek-renderer > div:nth-child(2) {
+  max-width: var(--theme--preview-width) !important;
+}
+
+.notion-peek-renderer .notion-scroller.vertical > div:nth-child(2),
+.notion-peek-renderer .notion-page-view-discussion,
+.notion-peek-renderer .notion-page-content {
+  padding-left: var(--theme--preview-padding) !important;
+  padding-right: var(--theme--preview-padding) !important;
+  width: 100%;
+}
+
+/* prevent block hover options overlaying topbar */
+.notion-topbar {
+  background: var(--theme--main);
+}
+
+/* checkboxes */
+.notion-to_do-block > div [role='button']:hover,
+.notion-to_do-block > div [role='button']:hover .checkboxSquare,
+.notion-to_do-block > div [role='button']:hover .check {
+  background: var(--theme--option_hover-background) !important;
+}
+.notion-to_do-block > div [role='button']:hover .checkboxSquare path,
+.notion-to_do-block > div [role='button']:hover .check polygon {
+  fill: var(--theme--option_hover-color) !important;
+}
+.notion-to_do-block > div [role='button']:not(:hover) .check {
+  background: var(--theme--option_active-background) !important;
+}
+.notion-to_do-block > div [role='button']:not(:hover) .check polygon {
+  fill: var(--theme--option_active-color) !important;
+}
+
+/* fonts */
+[style*='Segoe UI'] {
+  font-family: var(--theme--font_sans) !important;
+}
+[style*='Georgia'] {
+  font-family: var(--theme--font_serif) !important;
+}
+[style*='iawriter-mono'] {
+  font-family: var(--theme--font_mono) !important;
+}
+[style*='SFMono-Regular'] {
+  font-family: var(--theme--font_code) !important;
+}
+.notion-frame .notion-page-block div[placeholder='Untitled'] {
+  font-size: var(--theme--font_title-size) !important;
+}
+[placeholder='Heading 1'] {
+  font-size: var(--theme--font_heading1-size) !important;
+}
+[placeholder='Heading 2'] {
+  font-size: var(--theme--font_heading2-size) !important;
+}
+[placeholder='Heading 3'] {
+  font-size: var(--theme--font_heading3-size) !important;
+}
+.notion-frame .notion-scroller.vertical.horizontal [style*='font-size: 14px'] {
+  font-size: var(--theme--font_label-size) !important;
+}
+.notion-frame .notion-scroller.vertical.horizontal .notion-page-content {
+  font-size: var(--theme--font_body-size) !important;
+}
+.notion-code-block [placeholder=' '] {
+  font-size: var(--theme--font_code-size) !important;
+}
+.notion-sidebar [style*='font-size: 14px'] {
+  font-size: var(--theme--font_sidebar-size) !important;
+}
+
+/* code */
+.notion-page-content .notion-code-block {
+  background: var(--theme--code-background) !important;
+}
+.notion-code-block > div {
+  color: var(--theme--code_text) !important;
+}
+.notion-code-block .token.function {
+  color: var(--theme--code_function) !important;
+}
+.notion-code-block .token.keyword {
+  color: var(--theme--code_keyword) !important;
+}
+.notion-code-block .token.tag {
+  color: var(--theme--code_tag) !important;
+}
+.notion-code-block .token.operator {
+  color: var(--theme--code_operator) !important;
+}
+.notion-code-block .token.important {
+  color: var(--theme--code_important) !important;
+}
+.notion-code-block .token.property {
+  color: var(--theme--code_property) !important;
+}
+.notion-code-block .token.builtin {
+  color: var(--theme--code_builtin) !important;
+}
+.notion-code-block .token.attr-name {
+  color: var(--theme--code_attr-name) !important;
+}
+.notion-code-block .token.attr-value {
+  color: var(--theme--code_attr-value) !important;
+}
+.notion-code-block .token.comment {
+  color: var(--theme--code_comment) !important;
+}
+.notion-code-block .token.punctuation {
+  color: var(--theme--code_punctuation) !important;
+}
+.notion-code-block .token.doctype {
+  color: var(--theme--code_doctype) !important;
+}
+.notion-code-block .token.number {
+  color: var(--theme--code_number) !important;
+}
+.notion-code-block .token.string {
+  color: var(--theme--code_string) !important;
+}

mods/core/css/titlebar.css

@@ -0,0 +1,44 @@
+/*
+ * notion-enhancer
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 TarasokUA
+ * under the MIT license
+ */
+
+@import './buttons.css';
+
+.frameless .notion-topbar {
+  height: calc(var(--configured--dragarea_height, 10px) + 45px) !important;
+}
+.frameless .window-dragarea {
+  height: var(--configured--dragarea_height, 10px);
+  width: 100%;
+}
+.frameless .window-dragarea {
+  background: var(--theme--dragarea);
+}
+
+@media (max-width: 760px) {
+  .frameless .notion-topbar {
+    height: calc(var(--configured--dragarea_height, 10px) + 80px) !important;
+  }
+  .frameless .notion-topbar > :nth-child(2) {
+    height: 80px !important;
+    display: grid !important;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+  }
+  .window-buttons-area {
+    grid-row: 1;
+    grid-column: 9 / span end;
+    justify-content: flex-end;
+  }
+  .notion-topbar-breadcrumb {
+    grid-row: 2;
+    grid-column: 1 / span 8;
+  }
+  .notion-topbar-actions {
+    grid-row: 2;
+    grid-column: 9 / span end;
+    justify-content: flex-end;
+  }
+}

mods/core/css/variables.css

@@ -0,0 +1,236 @@
+/*
+ * notion-enhancer
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 TarasokUA
+ * (c) 2020 Arecsu
+ * (c) 2020 u/zenith_illinois
+ * under the MIT license
+ */
+
+:root {
+  /** dark **/
+
+  --theme_dark--main: rgb(47, 52, 55);
+  --theme_dark--sidebar: rgb(55, 60, 63);
+  --theme_dark--overlay: rgba(15, 15, 15, 0.6);
+  --theme_dark--dragarea: #272d2f;
+  --theme_dark--preview-width: 977px;
+  --theme_dark--preview-padding: 8rem;
+  --theme_dark--preview_banner-height: 20vh;
+  --theme_dark--page_banner-height: 30vh;
+
+  --theme_dark--font_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji',
+    'Segoe UI Symbol';
+  --theme_dark--font_serif: Lyon-Text, Georgia, YuMincho, 'Yu Mincho',
+    'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Songti TC', 'Songti SC',
+    SimSun, 'Nanum Myeongjo', NanumMyeongjo, Batang, serif;
+  --theme_dark--font_mono: iawriter-mono, Nitti, Menlo, Courier, monospace;
+  --theme_dark--font_code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo,
+    Courier, monospace;
+
+  --theme_dark--font_title-size: 40px;
+  --theme_dark--font_heading1-size: 30px;
+  --theme_dark--font_heading2-size: 24px;
+  --theme_dark--font_heading3-size: 20px;
+  --theme_dark--font_label-size: 14px;
+  --theme_dark--font_body-size: 16px;
+  --theme_dark--font_code-size: 12.75px;
+  --theme_dark--font_sidebar-size: 14px;
+
+  --theme_dark--scrollbar: #505457;
+  --theme_dark--scrollbar-border: transparent;
+  --theme_dark--scrollbar_hover: #696d6f;
+
+  --theme_dark--card: rgb(63, 68, 71);
+  --theme_dark--gallery: rgba(255, 255, 255, 0.05);
+  --theme_dark--table-border: rgba(255, 255, 255, 0.1);
+  --theme_dark--interactive_hover: rgb(71, 76, 80);
+  --theme_dark--interactive_hover-border: transparent;
+  --theme_dark--button_close: #e81123;
+  --theme_dark--button_close-fill: white;
+
+  --theme_dark--selected: rgba(46, 170, 220, 0.2);
+  --theme_dark--primary: rgb(46, 170, 220);
+  --theme_dark--primary_hover: rgb(6, 156, 205);
+  --theme_dark--primary_click: rgb(0, 141, 190);
+  --theme_dark--primary_indicator: rgb(235, 87, 87);
+
+  --theme_dark--option-color: white;
+  --theme_dark--option-background: transparent;
+  --theme_dark--option_active-color: white;
+  --theme_dark--option_active-background: var(--theme_dark--primary);
+  --theme_dark--option_hover-color: white;
+  --theme_dark--option_hover-background: rgb(71, 76, 80);
+
+  --theme_dark--danger_text: rgb(235, 87, 87);
+  --theme_dark--danger_border: rgba(235, 87, 87, 0.5);
+
+  --theme_dark--text: rgba(255, 255, 255, 0.9);
+  --theme_dark--text_ui: rgba(255, 255, 255, 0.6);
+  --theme_dark--text_ui_info: rgba(255, 255, 255, 0.4);
+
+  --theme_dark--text_gray: rgba(151, 154, 155, 0.95);
+  --theme_dark--text_brown: rgb(147, 114, 100);
+  --theme_dark--text_orange: rgb(255, 163, 68);
+  --theme_dark--text_yellow: rgb(255, 220, 73);
+  --theme_dark--text_green: rgb(77, 171, 154);
+  --theme_dark--text_blue: rgb(82, 156, 202);
+  --theme_dark--text_purple: rgb(154, 109, 215);
+  --theme_dark--text_pink: rgb(226, 85, 161);
+  --theme_dark--text_red: rgb(255, 115, 105);
+
+  --theme_dark--bg_text: var(--theme_dark--text);
+  --theme_dark--bg_gray: rgba(151, 154, 155, 0.5);
+  --theme_dark--bg_brown: rgba(147, 114, 100, 0.5);
+  --theme_dark--bg_orange: rgba(255, 163, 68, 0.5);
+  --theme_dark--bg_yellow: rgba(255, 220, 73, 0.5);
+  --theme_dark--bg_green: rgba(77, 171, 154, 0.5);
+  --theme_dark--bg_blue: rgba(82, 156, 202, 0.5);
+  --theme_dark--bg_purple: rgba(154, 109, 215, 0.5);
+  --theme_dark--bg_pink: rgba(226, 85, 161, 0.5);
+  --theme_dark--bg_red: rgba(255, 115, 105, 0.5);
+
+  --theme_dark--line_text: var(--theme_dark--text);
+  --theme_dark--line_gray: rgb(69, 75, 78);
+  --theme_dark--line_brown: rgb(67, 64, 64);
+  --theme_dark--line_orange: rgb(89, 74, 58);
+  --theme_dark--line_yellow: rgb(89, 86, 59);
+  --theme_dark--line_green: rgb(53, 76, 75);
+  --theme_dark--line_blue: rgb(54, 73, 84);
+  --theme_dark--line_purple: rgb(68, 63, 87);
+  --theme_dark--line_pink: rgb(83, 59, 76);
+  --theme_dark--line_red: rgb(89, 65, 65);
+
+  --theme_dark--code_inline-text: #eb5757;
+  --theme_dark--code_inline-background: rgba(135, 131, 120, 0.15);
+  --theme_dark--code_text: var(--theme_dark--text);
+  --theme_dark--code-background: rgb(63, 68, 71);
+  --theme_dark--code_function: rgba(255, 255, 255, 0.9);
+  --theme_dark--code_keyword: hsl(350, 40%, 70%);
+  --theme_dark--code_tag: hsl(350, 40%, 70%);
+  --theme_dark--code_operator: hsl(40, 90%, 60%);
+  --theme_dark--code_important: #e90;
+  --theme_dark--code_property: hsl(350, 40%, 70%);
+  --theme_dark--code_builtin: hsl(75, 70%, 60%);
+  --theme_dark--code_attr-name: hsl(75, 70%, 60%);
+  --theme_dark--code_comment: hsl(30, 20%, 50%);
+  --theme_dark--code_punctuation: rgba(255, 255, 255, 0.9);
+  --theme_dark--code_doctype: hsl(30, 20%, 50%);
+  --theme_dark--code_number: hsl(350, 40%, 70%);
+  --theme_dark--code_string: hsl(75, 70%, 60%);
+  --theme_dark--code_attr-value: hsl(350, 40%, 70%);
+
+  /** light **/
+
+  --theme_light--main: white;
+  --theme_light--sidebar: rgb(247, 246, 243);
+  --theme_light--overlay: rgba(15, 15, 15, 0.6);
+  --theme_light--dragarea: rgba(55, 53, 47, 0.04);
+  --theme_light--preview-width: 977px;
+  --theme_light--preview-padding: 8rem;
+  --theme_light--preview_banner-height: 20vh;
+  --theme_light--page_banner-height: 30vh;
+
+  --theme_light--font_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji',
+    'Segoe UI Symbol';
+  --theme_light--font_serif: Lyon-Text, Georgia, YuMincho, 'Yu Mincho',
+    'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Songti TC', 'Songti SC',
+    SimSun, 'Nanum Myeongjo', NanumMyeongjo, Batang, serif;
+  --theme_light--font_mono: iawriter-mono, Nitti, Menlo, Courier, monospace;
+  --theme_light--font_code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo,
+    Courier, monospace;
+
+  --theme_light--font_title-size: 40px;
+  --theme_light--font_heading1-size: 30px;
+  --theme_light--font_heading2-size: 24px;
+  --theme_light--font_heading3-size: 20px;
+  --theme_light--font_label-size: 14px;
+  --theme_light--font_body-size: 16px;
+  --theme_light--font_code-size: 12.75px;
+  --theme_light--font_sidebar-size: 14px;
+
+  --theme_light--scrollbar: #d9d8d6;
+  --theme_light--scrollbar-border: #cacac8;
+  --theme_light--scrollbar_hover: #cacac8;
+
+  --theme_light--card: rgb(247, 247, 247);
+  --theme_light--gallery: rgba(55, 53, 47, 0.024);
+  --theme_light--table-border: rgba(55, 53, 47, 0.16);
+  --theme_light--interactive_hover: rgba(55, 53, 47, 0.08);
+  --theme_light--interactive_hover-border: transparent;
+  --theme_light--button_close: #e81123;
+  --theme_light--button_close-fill: white;
+
+  --theme_light--selected: rgba(46, 170, 220, 0.2);
+  --theme_light--primary: rgb(46, 170, 220);
+  --theme_light--primary_hover: rgb(6, 156, 205);
+  --theme_light--primary_click: rgb(0, 141, 190);
+  --theme_light--primary_indicator: rgb(235, 87, 87);
+
+  --theme_light--option-color: black;
+  --theme_light--option-background: transparent;
+  --theme_light--option_hover-color: black;
+  --theme_light--option_hover-background: rgba(55, 53, 47, 0.08);
+  --theme_light--option_active-color: white;
+  --theme_light--option_active-background: var(--theme_light--primary);
+
+  --theme_light--danger_text: rgb(235, 87, 87);
+  --theme_light--danger_border: rgba(235, 87, 87, 0.5);
+
+  --theme_light--text: rgb(55, 53, 47);
+  --theme_light--text_ui: rgba(55, 53, 47, 0.6);
+  --theme_light--text_ui_info: rgba(55, 53, 47, 0.4);
+
+  --theme_light--text_gray: rgb(155, 154, 151);
+  --theme_light--text_brown: rgb(100, 71, 58);
+  --theme_light--text_orange: rgb(217, 115, 13);
+  --theme_light--text_yellow: rgb(223, 171, 1);
+  --theme_light--text_green: rgb(15, 123, 108);
+  --theme_light--text_blue: rgb(11, 110, 153);
+  --theme_light--text_purple: rgb(105, 64, 165);
+  --theme_light--text_pink: rgb(173, 26, 114);
+  --theme_light--text_red: rgb(224, 62, 62);
+
+  --theme_light--bg_text: var(--theme_light--text);
+  --theme_light--bg_gray: rgb(235, 236, 237);
+  --theme_light--bg_brown: rgb(233, 229, 227);
+  --theme_light--bg_orange: rgb(250, 235, 221);
+  --theme_light--bg_yellow: rgb(251, 243, 219);
+  --theme_light--bg_green: rgb(221, 237, 234);
+  --theme_light--bg_blue: rgb(221, 235, 241);
+  --theme_light--bg_purple: rgb(234, 228, 242);
+  --theme_light--bg_pink: rgb(244, 223, 235);
+  --theme_light--bg_red: rgb(251, 228, 228);
+
+  --theme_light--line_text: var(--theme_light--text);
+  --theme_light--line_gray: rgb(235, 236, 237);
+  --theme_light--line_brown: rgb(233, 229, 227);
+  --theme_light--line_orange: rgb(250, 235, 221);
+  --theme_light--line_yellow: rgb(251, 243, 219);
+  --theme_light--line_green: rgb(221, 237, 234);
+  --theme_light--line_blue: rgb(221, 235, 241);
+  --theme_light--line_purple: rgb(234, 228, 242);
+  --theme_light--line_pink: rgb(244, 223, 235);
+  --theme_light--line_red: rgb(251, 228, 228);
+
+  --theme_light--code_inline-text: #eb5757;
+  --theme_light--code_inline-background: rgba(135, 131, 120, 0.15);
+  --theme_light--code_text: var(--theme_light--text);
+  --theme_light--code-background: rgb(247, 246, 243);
+  --theme_light--code_function: #dd4a68;
+  --theme_light--code_keyword: #07a;
+  --theme_light--code_tag: #905;
+  --theme_light--code_operator: #9a6e3a;
+  --theme_light--code_important: #e90;
+  --theme_light--code_property: #905;
+  --theme_light--code_builtin: #690;
+  --theme_light--code_attr-name: #690;
+  --theme_light--code_comment: slategray;
+  --theme_light--code_punctuation: #999;
+  --theme_light--code_doctype: slategray;
+  --theme_light--code_number: #905;
+  --theme_light--code_string: #690;
+  --theme_light--code_attr-value: #07a;
+}

mods/core/css/variables.json

@@ -0,0 +1,95 @@
+[
+  "--theme--main",
+  "--theme--sidebar",
+  "--theme--overlay",
+  "--theme--dragarea",
+  "--theme--preview-width",
+  "--theme--preview-padding",
+  "--theme--preview_banner-height",
+  "--theme--page_banner-height",
+  "--theme--font_sans",
+  "--theme--font_serif",
+  "--theme--font_mono",
+  "--theme--font_code",
+  "--theme--font_title-size",
+  "--theme--font_heading1-size",
+  "--theme--font_heading2-size",
+  "--theme--font_heading3-size",
+  "--theme--font_label-size",
+  "--theme--font_body-size",
+  "--theme--font_code-size",
+  "--theme--font_sidebar-size",
+  "--theme--scrollbar",
+  "--theme--scrollbar-border",
+  "--theme--scrollbar_hover",
+  "--theme--card",
+  "--theme--gallery",
+  "--theme--table-border",
+  "--theme--interactive_hover",
+  "--theme--interactive_hover-border",
+  "--theme--button_close",
+  "--theme--button_close-fill",
+  "--theme--selected",
+  "--theme--primary",
+  "--theme--primary_hover",
+  "--theme--primary_click",
+  "--theme--primary_indicator",
+  "--theme--option-color",
+  "--theme--option-background",
+  "--theme--option_active-color",
+  "--theme--option_active-background",
+  "--theme--option_hover-color",
+  "--theme--option_hover-background",
+  "--theme--danger_text",
+  "--theme--danger_border",
+  "--theme--text",
+  "--theme--text_ui",
+  "--theme--text_ui_info",
+  "--theme--text_gray",
+  "--theme--text_brown",
+  "--theme--text_orange",
+  "--theme--text_yellow",
+  "--theme--text_green",
+  "--theme--text_blue",
+  "--theme--text_purple",
+  "--theme--text_pink",
+  "--theme--text_red",
+  "--theme--bg_text",
+  "--theme--bg_gray",
+  "--theme--bg_brown",
+  "--theme--bg_orange",
+  "--theme--bg_yellow",
+  "--theme--bg_green",
+  "--theme--bg_blue",
+  "--theme--bg_purple",
+  "--theme--bg_pink",
+  "--theme--bg_red",
+  "--theme--line_text",
+  "--theme--line_gray",
+  "--theme--line_brown",
+  "--theme--line_orange",
+  "--theme--line_yellow",
+  "--theme--line_green",
+  "--theme--line_blue",
+  "--theme--line_purple",
+  "--theme--line_pink",
+  "--theme--line_red",
+  "--theme--code_inline-text",
+  "--theme--code_inline-background",
+  "--theme--code_text",
+  "--theme--code-background",
+  "--theme--code_function",
+  "--theme--code_keyword",
+  "--theme--code_tag",
+  "--theme--code_operator",
+  "--theme--code_important",
+  "--theme--code_property",
+  "--theme--code_builtin",
+  "--theme--code_attr-name",
+  "--theme--code_comment",
+  "--theme--code_punctuation",
+  "--theme--code_doctype",
+  "--theme--code_number",
+  "--theme--code_string",
+  "--theme--code_attr-value"
+]

mods/core/icons/alwaysontop_off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" file="currentColor" viewBox="0 0 250 250"><path file="currentColor" d="M124.859 234.52L67.5474 135.736H102.683V12.184H147.323V135.736H182.459L124.859 234.52Z"></path></svg>

mods/core/icons/alwaysontop_on.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" file="currentColor" viewBox="0 0 250 250"><path file="currentColor" d="M102.683 234.52V110.968H67.5474L124.859 12.184L182.459 110.968H147.323V234.52H102.683Z"></path></svg>

mods/core/icons/close.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="none" viewBox="0 0 250 250"><line x1="21.393" x2="233.525" y1="229.525" y2="17.393" stroke="#000" stroke-miterlimit="4.139" stroke-width="30"/><line x1="17.607" x2="229.739" y1="17.393" y2="229.525" stroke="#000" stroke-linejoin="round" stroke-width="30"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="none" viewBox="0 0 250 250"><line x1="21.393" x2="233.525" y1="229.525" y2="17.393" stroke="#000" stroke-miterlimit="4.139" stroke-width="30"></line><line x1="17.607" x2="229.739" y1="17.393" y2="229.525" stroke="#000" stroke-linejoin="round" stroke-width="30"></line></svg>

mods/core/icons/file.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm160-14.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z" class=""></path></svg>

mods/core/icons/maximize_off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" file="currentColor" viewBox="0 0 250 250"><path file="currentColor" d="M14.7346 227.26V7.03998H235.215V227.26H14.7346ZM46.4546 195.8H203.495V70.48H46.4546V195.8Z"></path></svg>

mods/core/icons/maximize_on.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" file="currentColor" viewBox="0 0 250 250"><path file="currentColor" d="M16.1311 225.96V76.72H84.5111V8.07999H233.751V157.32H165.371V225.96H16.1311ZM110.771 53.58V76.72H165.371V131.32H207.491V53.58H110.771ZM42.3911 199.96H139.111V122.22H42.3911V199.96Z"></path></svg>

mods/core/icons/minimize.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" file="currentColor" viewBox="0 0 250 250"><path file="currentColor" d="M17.8021 138.04V106.072H232.074V138.04H17.8021Z"></path></svg>

mods/core/menu.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="smooth-scrollbars" lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>notion-enhancer menu</title>
+    <script src="./colorjoe/min.js"></script>
+    <link rel="stylesheet" href="./colorjoe/picker.css" />
+    <link rel="stylesheet" href="./css/menu.css" />
+  </head>
+  <body>
+    <header id="menu-titlebar"></header>
+    <main>
+      <div id="alerts"></div>
+      <div id="search">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+          <path
+            d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+          ></path>
+        </svg>
+        <input type="text" placeholder="search ('/' to focus)" />
+        <div id="tags"></div>
+      </div>
+      <div id="modules"></div>
+    </main>
+    <section id="popup">
+      <div id="popup-overlay" class="close-modal"></div>
+      <div id="colorpicker"></div>
+    </section>
+    <script>
+      window['__start']();
+    </script>
+  </body>
+</html>

mods/core/menu.js

@@ -0,0 +1,485 @@
+/*
+ * notion-enhancer
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * under the MIT license
+ */
+
+'use strict';
+
+const store = require('../../pkg/store.js'),
+  helpers = require('../../pkg/helpers.js'),
+  fs = require('fs-extra'),
+  path = require('path'),
+  electron = require('electron'),
+  browser = electron.remote.getCurrentWindow();
+
+window['__start'] = async () => {
+  const buttons = require('./buttons.js')(() => ({ frameless: true }));
+  document.querySelector('#menu-titlebar').appendChild(buttons.element);
+
+  document.defaultView.addEventListener('keyup', (event) => {
+    if (event.code === 'F5') location.reload();
+    if ((event.ctrlKey || event.metaKey) && event.key === 'e') browser.close();
+    if (!(event.ctrlKey || event.metaKey) && !event.altKey && !event.shiftKey) {
+      if (
+        document.activeElement.parentElement.id === 'tags' &&
+        event.key === 'Enter'
+      )
+        document.activeElement.click();
+      if (document.activeElement.tagName.toLowerCase() === 'input') {
+        if (document.activeElement.type === 'checkbox' && event.key === 'Enter')
+          document.activeElement.checked = !document.activeElement.checked;
+        if (
+          ['Escape', 'Enter'].includes(event.key) &&
+          document.activeElement.type !== 'checkbox' &&
+          (document.activeElement.parentElement.id !== 'search' ||
+            event.key === 'Escape')
+        )
+          document.activeElement.blur();
+      } else if (event.key === '/')
+        document.querySelector('#search > input').focus();
+    }
+  });
+
+  electron.ipcRenderer.send('enhancer:get-menu-theme');
+  electron.ipcRenderer.on('enhancer:set-menu-theme', (event, theme) => {
+    document.body.className = `notion-${theme.mode}-theme`;
+    for (const style of theme.rules)
+      document.body.style.setProperty(style[0], style[1]);
+  });
+
+  function createElement(html) {
+    const template = document.createElement('template');
+    template.innerHTML = html.trim();
+    return template.content.firstElementChild;
+  }
+  function createAlert(type, message) {
+    if (!type)
+      throw Error('<notion-enhancer> @ createAlert: no alert type specified');
+    const el = createElement(`
+      <section class="${type}" role="alert">
+        <p>${message}</p>
+      </section>
+    `);
+    return {
+      el,
+      resolve() {
+        el.remove();
+      },
+      prepend() {
+        document.querySelector('#alerts').prepend(el);
+        return this;
+      },
+      append() {
+        document.querySelector('#alerts').appendChild(el);
+        return this;
+      },
+    };
+  }
+
+  // update checker
+  fetch(
+    `https://api.github.com/repos/dragonwocky/notion-enhancer/releases/latest`
+  )
+    .then((res) => res.json())
+    .then((res) => {
+      const raw_v = require('./mod.js').version,
+        version = {
+          local: raw_v.split(/[~-]/g)[0],
+          repo: res.tag_name.slice(1),
+        };
+      if (version.local == version.repo) return;
+      // compare func from https://github.com/substack/semver-compare
+      version.sorted = [version.local, version.repo].sort((a, b) => {
+        const pa = a.split('.'),
+          pb = b.split('.');
+        for (let i = 0; i < 3; i++) {
+          let na = Number(pa[i]),
+            nb = Number(pb[i]);
+          if (na > nb) return 1;
+          if (nb > na) return -1;
+          if (!isNaN(na) && isNaN(nb)) return 1;
+          if (isNaN(na) && !isNaN(nb)) return -1;
+        }
+        return 0;
+      });
+      createAlert(
+        'warning',
+        version.sorted[0] == version.local
+          ? `update <b>v${version.repo}</b> available!<br>
+             run <code>npm i -g notion-enhancer</code><br>
+             (or <code>yarn global add notion-enhancer</code>),<br>
+             <u>and</u> <code>notion-enhancer apply</code>.`
+          : `local build <b>v${raw_v}</b> is unstable.`
+      ).prepend();
+    });
+
+  // mod loader
+  const modules = helpers.getEnhancements();
+  if (modules.loaded.length)
+    console.info(
+      `<notion-enhancer> enhancements loaded: ${modules.loaded
+        .map((mod) => mod.name)
+        .join(', ')}.`
+    );
+  if (modules.invalid.length) {
+    createAlert(
+      'error',
+      `invalid mods found: ${modules.invalid
+        .map((mod) => `<b>${mod}</b>`)
+        .join(', ')}.`
+    ).append();
+  }
+
+  // further-configuration popup
+  const $popup = document.querySelector('#popup');
+  document.addEventListener('keyup', (event) => {
+    if (
+      $popup.classList.contains('visible') &&
+      [13, 27].includes(event.keyCode)
+    )
+      $popup.classList.remove('visible');
+  });
+  let colorpicker_target = null;
+  const $colorpicker = colorjoe
+    .rgb('colorpicker')
+    .on('change', function (color) {
+      if (!colorpicker_target) return;
+      colorpicker_target.elem.style.setProperty(
+        '--configured--color-value',
+        color.css()
+      );
+      store(colorpicker_target.id)[colorpicker_target.key] = color.css();
+    })
+    .update();
+
+  document
+    .querySelector('#colorpicker')
+    .appendChild(createElement('<button class="close-modal"></button>'));
+  document.querySelectorAll('#popup .close-modal').forEach((el) =>
+    el.addEventListener('click', (event) => {
+      $popup.classList.remove('visible');
+    })
+  );
+
+  // search
+  const search_query = {
+    enabled: true,
+    disabled: true,
+    tags: new Set(
+      modules.loaded
+        .map((mod) => mod.tags)
+        .flat()
+        .sort()
+    ),
+  };
+  function search() {
+    modules.loaded.forEach((mod) => {
+      const $search_input = document.querySelector('#search > input');
+      if (
+        (mod.elem.classList.contains('enabled') && !search_query.enabled) ||
+        (mod.elem.classList.contains('disabled') && !search_query.disabled) ||
+        !mod.tags.some((tag) => search_query.tags.has(tag)) ||
+        ($search_input.value &&
+          !(
+            mod.name +
+            mod.tags.map((tag) => `#${tag}`).join(' ') +
+            mod.desc
+          ).includes($search_input.value))
+      )
+        return (mod.elem.style.display = 'none');
+      mod.elem.style.display = 'block';
+    });
+  }
+  document.querySelector('#search > input').addEventListener('input', search);
+
+  function createTag(tagname, onclick, color) {
+    if (!tagname)
+      throw Error('<notion-enhancer> @ createTag: no tagname specified');
+    if (!onclick)
+      throw Error('<notion-enhancer> @ createTag: no action specified');
+    const el = createElement(
+      `<span class="selected" ${
+        color ? `style="--tag_color: ${color}" ` : ''
+      }tabindex="0">${tagname}</span>`
+    );
+    document.querySelector('#tags').append(el);
+    el.addEventListener('click', (event) => {
+      el.className = el.className === 'selected' ? '' : 'selected';
+      onclick(el.className === 'selected');
+    });
+    return el;
+  }
+  createTag(
+    'enabled',
+    (state) => [(search_query.enabled = state), search()]
+    // 'var(--theme--bg_green)'
+  );
+  createTag(
+    'disabled',
+    (state) => [(search_query.disabled = state), search()]
+    // 'var(--theme--bg_red)'
+  );
+  for (let tag of search_query.tags)
+    createTag(`#${tag}`, (state) => [
+      state ? search_query.tags.add(tag) : search_query.tags.delete(tag),
+      search(),
+    ]);
+
+  // mod info + options
+  function markdown(string) {
+    const parsed = string
+      .split('\n')
+      .map((line) =>
+        line
+          .trim()
+          .replace(/\s+/g, ' ')
+          // > quote
+          .replace(/^>\s+(.+)$/g, '<blockquote>$1</blockquote>')
+          // ~~strikethrough~~
+          .replace(/([^\\])?~~((?:(?!~~).)*[^\\])~~/g, '$1<s>$2</s>')
+          // __underline__
+          .replace(/([^\\])?__((?:(?!__).)*[^\\])__/g, '$1<u>$2</u>')
+          // **bold**
+          .replace(/([^\\])?\*\*((?:(?!\*\*).)*[^\\])\*\*/g, '$1<b>$2</b>')
+          // *italic*
+          .replace(/([^\\])?\*([^*]*[^\\*])\*/g, '$1<i>$2</i>')
+          // _italic_
+          .replace(/([^\\])?_([^_]*[^\\_])_/g, '$1<i>$2</i>')
+          // `code`
+          .replace(/([^\\])?`([^`]*[^\\`])`/g, '$1<code>$2</code>')
+          // ![image_title](source)
+          .replace(
+            /([^\\])?\!\[([^\]]*[^\\\]]?)\]\(([^)]*[^\\)])\)/g,
+            `$1<img alt="$2" src="$3" onerror="this.remove()">`
+          )
+          // [link](destination)
+          .replace(
+            /([^\\])?\[([^\]]*[^\\\]]?)\]\(([^)]*[^\\)])\)/g,
+            '$1<a href="$3">$2</a>'
+          )
+      )
+      .map((line) =>
+        line.startsWith('<blockquote>') ? line : `<p>${line}</p>`
+      )
+      .join('');
+    return parsed;
+  }
+
+  let modified_notice;
+  function modified() {
+    if (modified_notice) return;
+    modified_notice = createAlert(
+      'info',
+      `changes may not fully apply until <span data-relaunch>app relaunch</span>.`
+    );
+    modified_notice.el
+      .querySelector('[data-relaunch]')
+      .addEventListener('click', (event) => {
+        electron.remote.app.relaunch();
+        electron.remote.app.quit();
+      });
+    modified_notice.append();
+  }
+
+  const file_icon = await fs.readFile(
+    path.resolve(`${__dirname}/icons/file.svg`)
+  );
+  function createOption(opt, id) {
+    let $opt;
+    switch (opt.type) {
+      case 'toggle':
+        $opt = `
+          <input type="checkbox" id="${opt.type}_${id}--${opt.key}"
+          ${store(id, { [opt.key]: opt.value })[opt.key] ? 'checked' : ''}/>
+          <label for="${opt.type}_${id}--${opt.key}">
+            <span class="name">${opt.label}</span>
+            <span class="switch"><span class="dot"></span></span>
+          </label>
+        `;
+        break;
+      case 'select':
+        $opt = `
+          <label for="${opt.type}_${id}--${opt.key}">${opt.label}</label>
+          <select id="${opt.type}_${id}--${opt.key}">
+            ${opt.value
+              .map((val) => `<option value="${val}">${val}</option>`)
+              .join('')}
+          </select>
+        `;
+        break;
+      case 'input':
+        $opt = `
+          <label for="${opt.type}_${id}--${opt.key}">${opt.label}</label>
+          <input type="${typeof value === 'number' ? 'number' : 'text'}" id="${
+          opt.type
+        }_${id}--${opt.key}">
+        `;
+        break;
+      case 'color':
+        $opt = `
+          <label for="${opt.type}_${id}--${opt.key}">${opt.label}</label>
+          <input type="button" id="${opt.type}_${id}--${opt.key}">
+        `;
+        break;
+      case 'file':
+        $opt = `
+          <input type="file" id="${opt.type}_${id}--${opt.key}"
+          ${
+            opt.extensions
+              ? ` accept="${opt.extensions
+                  .map((ext) => (ext.startsWith('.') ? ext : `.${ext}`))
+                  .join(',')}"`
+              : ''
+          }>
+          <label for="${opt.type}_${id}--${opt.key}">
+            <span class="label">
+              <span class="name">${opt.label}</span>
+              <button class="clear"></button>
+            </span>
+            <span class="choose">
+              ${file_icon}
+              <span class="path">${
+                store(id)[opt.key]
+                  ? store(id)[opt.key].split(path.sep).reverse()[0]
+                  : 'choose a file...'
+              }</span>
+            </span>
+          </label>
+        `;
+    }
+    $opt = createElement(`<p class="${opt.type}">${$opt}</p>`);
+    if (opt.type === 'color') {
+      $opt
+        .querySelector(`#${opt.type}_${id}--${opt.key}`)
+        .style.setProperty(
+          '--configured--color-value',
+          store(id, { [opt.key]: opt.value })[opt.key]
+        );
+    } else if (opt.type === 'file') {
+      $opt.querySelector('.clear').addEventListener('click', (event) => {
+        store(id)[opt.key] = '';
+        $opt.querySelector('.path').innerText = 'choose a file...';
+      });
+    } else {
+      $opt.querySelector(`#${opt.type}_${id}--${opt.key}`).value = store(id, {
+        [opt.key]: opt.type === 'select' ? opt.value[0] : opt.value,
+      })[opt.key];
+    }
+
+    return $opt;
+  }
+
+  const $modules = document.querySelector('#modules');
+  for (let mod of modules.loaded.sort((a, b) =>
+    a.tags.includes('core') ||
+    store('mods', { [a.id]: { pinned: false } }).pinned
+      ? -1
+      : b.tags.includes('core') ||
+        store('mods', { [b.id]: { pinned: false } }).pinned
+      ? 1
+      : a.name.localeCompare(b.name)
+  )) {
+    const enabled = store('mods', { [mod.id]: { enabled: false } })[mod.id]
+        .enabled,
+      author =
+        typeof mod.author === 'object'
+          ? mod.author
+          : {
+              name: mod.author,
+              link: `https://github.com/${mod.author}`,
+              avatar: `https://github.com/${mod.author}.png`,
+            };
+    mod.elem = createElement(`
+      <section class="${
+        mod.tags.includes('core') || enabled ? 'enabled' : 'disabled'
+      }" id="${mod.id}">
+        <div class="meta">
+          <h3 ${
+            mod.tags.includes('core')
+              ? `>${mod.name}`
+              : `class="toggle">
+            <input type="checkbox" id="enable_${mod.id}"
+            ${enabled ? 'checked' : ''} />
+            <label for="enable_${mod.id}">
+              <span class="name">${mod.name}</span>
+              <span class="switch"><span class="dot"></span></span>
+            </label>`
+          }</h3>
+          <p class="tags">${mod.tags
+            .map((tag) => (tag.startsWith('#') ? tag : `#${tag}`))
+            .join(' ')}</p>
+          <div class="desc">${markdown(mod.desc)}</div>
+          <p>
+            <a href="${author.link}" class="author">
+              <img src="${author.avatar}" onerror="this.src='./icons/user.png'">
+              ${author.name}
+            </a>
+            <span class="version">v${mod.version}</span>
+          </p>
+        </div>
+        ${
+          mod.options && mod.options.length ? '<div class="options"></div>' : ''
+        }
+      </section>
+    `);
+    const $enable = mod.elem.querySelector(`#enable_${mod.id}`);
+    if ($enable)
+      $enable.addEventListener('click', (event) => {
+        store('mods', { [mod.id]: { enabled: false } })[mod.id].enabled =
+          $enable.checked;
+        mod.elem.className = store('mods', { [mod.id]: { enabled: false } })[
+          mod.id
+        ].enabled
+          ? 'enabled'
+          : 'disabled';
+        search();
+        modified();
+      });
+
+    const $options = mod.elem.querySelector('.options');
+    if ($options)
+      for (const opt of mod.options) {
+        const $opt = createOption(opt, mod.id);
+        if (opt.type === 'color') {
+          const $preview = $opt.querySelector('input');
+          $opt.addEventListener('click', (event) => {
+            colorpicker_target = {
+              id: mod.id,
+              key: opt.key,
+              elem: $preview,
+            };
+            $colorpicker.set(store(mod.id)[opt.key]);
+            $popup.classList.add('visible');
+          });
+        } else {
+          $opt
+            .querySelector(`#${opt.type}_${mod.id}--${opt.key}`)
+            .addEventListener('change', (event) => {
+              if (opt.type === 'toggle') {
+                store(mod.id)[opt.key] = event.target.checked;
+              } else if (opt.type === 'file') {
+                if (event.target.files.length)
+                  store(mod.id)[opt.key] = event.target.files[0].path;
+                $opt.querySelector('.path').innerText = store(mod.id)[opt.key]
+                  ? store(mod.id)[opt.key].split(path.sep).reverse()[0]
+                  : 'choose a file...';
+              } else
+                store(mod.id)[opt.key] =
+                  typeof opt.value === 'number'
+                    ? Number(event.target.value)
+                    : event.target.value;
+              modified();
+            });
+        }
+        $options.appendChild($opt);
+      }
+    $modules.append(mod.elem);
+  }
+
+  document
+    .querySelectorAll('input[type="checkbox"]')
+    .forEach((checkbox) =>
+      checkbox.addEventListener('click', (event) => event.target.blur())
+    );
+};

mods/core/mod.js

@@ -0,0 +1,66 @@
+/*
+ * notion-enhancer
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * under the MIT license
+ */
+
+'use strict';
+
+module.exports = {
+  id: '0f0bf8b6-eae6-4273-b307-8fc43f2ee082',
+  tags: ['core'],
+  name: 'notion-enhancer core',
+  desc: 'the cli, modloader, menu, & tray.',
+  version: require('../../package.json').version,
+  author: 'dragonwocky',
+  options: [
+    {
+      key: 'openhidden',
+      label: 'hide app on open',
+      type: 'toggle',
+      value: false,
+    },
+    {
+      key: 'maximized',
+      label: 'auto-maximise windows',
+      type: 'toggle',
+      value: false,
+    },
+    {
+      key: 'close_to_tray',
+      label: 'close window to the tray',
+      type: 'toggle',
+      value: true,
+    },
+    {
+      key: 'frameless',
+      label: 'integrated titlebar',
+      type: 'toggle',
+      value: true,
+    },
+    {
+      key: 'dragarea_height',
+      label: 'height of frameless dragarea:',
+      type: 'input',
+      value: 15,
+    },
+    {
+      key: 'smooth_scrollbars',
+      label: 'integrated scrollbars',
+      type: 'toggle',
+      value: true,
+    },
+    {
+      key: 'hotkey',
+      label: 'window display hotkey:',
+      type: 'input',
+      value: 'CommandOrControl+Shift+A',
+    },
+  ],
+  hacks: {
+    'main/main.js': require('./tray.js'),
+    'main/createWindow.js': require('./create.js'),
+    'renderer/index.js': require('./render.js'),
+    'renderer/preload.js': require('./client.js'),
+  },
+};

mods/core/render.js

@@ -0,0 +1,31 @@
+/*
+ * notion-enhancer
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * under the MIT license
+ */
+
+'use strict';
+
+module.exports = (store, __exports) => {
+  const __start = window['__start'];
+
+  window['__start'] = function () {
+    __start();
+    const dragarea = document.querySelector(
+        '#root [style*="-webkit-app-region: drag"]'
+      ),
+      default_styles = dragarea.getAttribute('style');
+
+    document
+      .getElementById('notion')
+      .addEventListener('ipc-message', (event) => {
+        if (event.channel !== 'enhancer:sidebar-width') return;
+        dragarea.setAttribute(
+          'style',
+          `${default_styles} top: 2px; height: ${
+            store().dragarea_height
+          }px; left: ${event.args[0]};`
+        );
+      });
+  };
+};

mods/core/styles.css

@@ -0,0 +1,12 @@
+/*
+ * notion-enhancer
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * under the MIT license
+ */
+
+@import './css/localised.css';
+@import './css/dark.css';
+@import './css/light.css';
+@import './css/shared.css';
+@import './css/scrollbars.css';
+@import './css/titlebar.css';

mods/core/tray.js

@@ -0,0 +1,210 @@
+/*
+ * notion-enhancer
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 TarasokUA
+ * under the MIT license
+ */
+
+'use strict';
+
+let tray, enhancer_menu;
+
+module.exports = (store, __exports) => {
+  const electron = require('electron'),
+    path = require('path'),
+    is_mac = process.platform === 'darwin',
+    is_win = process.platform === 'win32',
+    helpers = require('../../pkg/helpers.js'),
+    __notion = helpers.getNotion();
+
+  electron.app.on('ready', () => {
+    tray = new electron.Tray(
+      is_win
+        ? path.resolve(`${__dirname}/icons/windows.ico`)
+        : new electron.nativeImage.createFromPath(
+            path.resolve(`${__dirname}/icons/mac+linux.png`)
+          ).resize({
+            width: 16,
+            height: 16,
+          })
+    );
+
+    electron.ipcMain.on('enhancer:set-menu-theme', (event, arg) => {
+      if (!enhancer_menu) return;
+      enhancer_menu.webContents.send('enhancer:set-menu-theme', arg);
+    });
+    electron.ipcMain.on('enhancer:get-menu-theme', (event, arg) => {
+      electron.webContents
+        .getAllWebContents()
+        .forEach((webContents) => webContents.send('enhancer:get-menu-theme'));
+    });
+    electron.ipcMain.on('enhancer:open-extension-menu', openExtensionMenu);
+
+    function calculateWindowPos(width, height) {
+      const screen = electron.screen.getDisplayNearestPoint({
+        x: tray.getBounds().x,
+        y: tray.getBounds().y,
+      });
+      // left
+      if (screen.workArea.x > 0)
+        return {
+          x: screen.workArea.x,
+          y: screen.workArea.height - height,
+        };
+      // top
+      if (screen.workArea.y > 0)
+        return {
+          x: Math.round(
+            tray.getBounds().x + tray.getBounds().width / 2 - width / 2
+          ),
+          y: screen.workArea.y,
+        };
+      // right
+      if (screen.workArea.width < screen.bounds.width)
+        return {
+          x: screen.workArea.width - width,
+          y: screen.bounds.height - height,
+        };
+      // bottom
+      return {
+        x: Math.round(
+          tray.getBounds().x + tray.getBounds().width / 2 - width / 2
+        ),
+        y: screen.workArea.height - height,
+      };
+    }
+
+    function openExtensionMenu() {
+      if (enhancer_menu) return enhancer_menu.show();
+      const window_state = require(`${__notion.replace(
+        /\\/g,
+        '/'
+      )}/app/node_modules/electron-window-state/index.js`)({
+        file: 'menu-windowstate.json',
+        path: helpers.data_folder,
+        defaultWidth: 275,
+        defaultHeight: 600,
+      });
+      electron.shell.openExternal(JSON.stringify(window_state));
+      enhancer_menu = new electron.BrowserWindow({
+        show: true,
+        frame: false,
+        titleBarStyle: 'hiddenInset',
+        x:
+          window_state.x ||
+          calculateWindowPos(window_state.width, window_state.height).x,
+        y:
+          window_state.y ||
+          calculateWindowPos(window_state.width, window_state.height).y,
+        width: window_state.width,
+        height: window_state.height,
+        webPreferences: {
+          preload: path.resolve(`${__dirname}/menu.js`),
+          nodeIntegration: true,
+          session: electron.session.fromPartition('persist:notion'),
+        },
+      });
+      enhancer_menu.loadURL('enhancement://core/menu.html');
+      enhancer_menu.on('close', (e) => {
+        window_state.saveState(enhancer_menu);
+        enhancer_menu = null;
+      });
+    }
+
+    const contextMenu = electron.Menu.buildFromTemplate([
+      {
+        type: 'normal',
+        label: 'Bug Report',
+        click: () => {
+          electron.shell.openExternal(
+            'https://github.com/dragonwocky/notion-enhancer/issues/new?labels=bug&template=bug-report.md'
+          );
+        },
+      },
+      {
+        type: 'normal',
+        label: 'Feature Request',
+        click: () => {
+          electron.shell.openExternal(
+            'https://github.com/dragonwocky/notion-enhancer/issues/new?labels=enhancement&template=feature-request.md'
+          );
+        },
+      },
+      {
+        type: 'separator',
+      },
+      {
+        type: 'normal',
+        label: 'Docs',
+        click: () => {
+          electron.shell.openExternal(
+            'https://github.com/dragonwocky/notion-enhancer/tree/js'
+          );
+        },
+      },
+      {
+        type: 'normal',
+        label: 'Enhancements',
+        accelerator: 'CommandOrControl+E',
+        click: openExtensionMenu,
+      },
+      {
+        type: 'normal',
+        label: 'New Window',
+        click: () => {
+          require('./create.js')(
+            store,
+            require(path.resolve(`${__notion}/app/main/createWindow.js`))
+          )(
+            '',
+            electron.BrowserWindow.getAllWindows().find(
+              (win) => win !== enhancer_menu
+            )
+          );
+        },
+        accelerator: 'CommandOrControl+Shift+N',
+      },
+      {
+        type: 'normal',
+        label: 'Toggle Visibility',
+        accelerator: store().hotkey,
+        click: toggleWindows,
+      },
+      {
+        type: 'separator',
+      },
+      {
+        label: 'Quit',
+        role: 'quit',
+      },
+    ]);
+    tray.setContextMenu(contextMenu);
+    tray.setToolTip('Notion');
+
+    function showWindows() {
+      const windows = electron.BrowserWindow.getAllWindows();
+      if (is_mac) electron.app.show();
+      if (store().maximized) windows.forEach((win) => [win.maximize()]);
+      else windows.forEach((win) => win.show());
+      electron.app.focus({ steal: true });
+    }
+    function hideWindows() {
+      const windows = electron.BrowserWindow.getAllWindows();
+      windows.forEach((win) => [win.isFocused() && win.blur(), win.hide()]);
+      if (is_mac) electron.app.hide();
+    }
+    function toggleWindows() {
+      const windows = electron.BrowserWindow.getAllWindows();
+      if (windows.some((win) => win.isVisible())) hideWindows();
+      else showWindows();
+    }
+
+    tray.on('click', toggleWindows);
+    electron.globalShortcut.register(store().hotkey, () => {
+      const windows = electron.BrowserWindow.getAllWindows();
+      if (windows.some((win) => win.isFocused() && win.isVisible()))
+        hideWindows();
+      else showWindows();
+    });
+  });
+};

mods/custom-inserts/mod.js

@@ -0,0 +1,57 @@
+/*
+ * custom inserts
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * under the MIT license
+ */
+
+'use strict';
+
+module.exports = {
+  id: 'b4b0aced-2059-43bf-8d1d-ccd757ee5ebb',
+  tags: ['extension'],
+  name: 'custom inserts',
+  desc: 'link files for small client-side tweaks.',
+  version: '0.1.1',
+  author: 'dragonwocky',
+  options: [
+    {
+      key: 'css',
+      label: 'css insert',
+      type: 'file',
+      extensions: ['css'],
+    },
+    {
+      key: 'js',
+      label: 'client-side js insert',
+      type: 'file',
+      extensions: ['js'],
+    },
+  ],
+  hacks: {
+    'renderer/preload.js'(store, __exports) {
+      const fs = require('fs-extra');
+      document.addEventListener('readystatechange', (event) => {
+        if (document.readyState !== 'complete') return false;
+        if (store().css) {
+          try {
+            const style = document.createElement('style');
+            style.type = 'text/css';
+            style.innerHTML = fs.readFileSync(store().css);
+            document.querySelector('head').appendChild(style);
+          } catch (err) {
+            console.warn('<custom-inserts> invalid css file... unsetting.');
+            store().css = '';
+          }
+        }
+        if (store().js) {
+          try {
+            require(store().js);
+          } catch (err) {
+            console.warn('<custom-inserts> invalid js file... unsetting.');
+            store().js = '';
+          }
+        }
+      });
+    },
+  },
+};

mods/dark+/mod.js

@@ -0,0 +1,52 @@
+/*
+ * dark+
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * under the MIT license
+ */
+
+'use strict';
+
+module.exports = {
+  id: 'c86cfe98-e645-4822-aa6b-e2de1e08bafa',
+  tags: ['theme', 'dark'],
+  name: 'dark+',
+  desc: 'a vivid-colour near-black theme.',
+  version: '0.1.3',
+  author: 'dragonwocky',
+  options: [
+    {
+      key: 'primary',
+      label: 'primary colour',
+      type: 'color',
+      value: 'rgb(177, 24, 24)',
+    },
+  ],
+  hacks: {
+    'renderer/preload.js'(store, __exports) {
+      const color = require('./one-color.js')(store().primary);
+      document.addEventListener('readystatechange', (event) => {
+        if (document.readyState !== 'complete') return false;
+        document.documentElement.style.setProperty(
+          '--theme_dark--selected',
+          color.lightness(0.35).alpha(0.2).cssa()
+        );
+        document.documentElement.style.setProperty(
+          '--theme_dark--primary',
+          color.hex()
+        );
+        document.documentElement.style.setProperty(
+          '--theme_dark--primary_hover',
+          color.lightness(0.5).hex()
+        );
+        document.documentElement.style.setProperty(
+          '--theme_dark--primary_click',
+          color.lightness(0.6).hex()
+        );
+        document.documentElement.style.setProperty(
+          '--theme_dark--primary_indicator',
+          color.lightness(0.4).hex()
+        );
+      });
+    },
+  },
+};

mods/dark+/styles.css

@@ -0,0 +1,116 @@
+/*
+ * dark+
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * under the MIT license
+ */
+
+:root {
+  --theme_dark--main: rgb(5, 5, 5);
+  --theme_dark--sidebar: rgb(1, 1, 1);
+  /* --theme_dark--overlay: rgba(15, 15, 15, 0.6); */
+  --theme_dark--dragarea: #000;
+  /* --theme_dark--preview-width: 977px;
+  --theme_dark--preview-padding: 8rem;
+  --theme_dark--preview_banner-height: 20vh;
+  --theme_dark--page_banner-height: 30vh; */
+
+  /* --theme_dark--font_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji',
+    'Segoe UI Symbol';
+  --theme_dark--font_serif: Lyon-Text, Georgia, YuMincho, 'Yu Mincho',
+    'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Songti TC', 'Songti SC',
+    SimSun, 'Nanum Myeongjo', NanumMyeongjo, Batang, serif;
+  --theme_dark--font_mono: iawriter-mono, Nitti, Menlo, Courier, monospace;
+  --theme_dark--font_code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo,
+    Courier, monospace; */
+
+  /* --theme_dark--font_title-size: 40px;
+  --theme_dark--font_heading1-size: 30px;
+  --theme_dark--font_heading2-size: 24px;
+  --theme_dark--font_heading3-size: 20px;
+  --theme_dark--font_label-size: 14px;
+  --theme_dark--font_body-size: 16px;
+  --theme_dark--font_code-size: 12.75px; */
+
+  --theme_dark--scrollbar: #23242599;
+  --theme_dark--scrollbar-border: transparent;
+  --theme_dark--scrollbar_hover: #37383899;
+
+  --theme_dark--card: #101010;
+  --theme_dark--gallery: rgba(26, 26, 26, 0.3);
+  --theme_dark--table-border: rgba(46, 46, 46, 0.7);
+  --theme_dark--interactive_hover: #020202;
+  /* --theme_dark--interactive_hover-border: transparent;
+  --theme_dark--button_close: #e81123;
+  --theme_dark--button_close-fill: white; */
+
+  /* --theme_dark--option-color: white;
+  --theme_dark--option-background: transparent;
+  --theme_dark--option_active-color: white;
+  --theme_dark--option_active-background: var(--theme_dark--primary);
+  --theme_dark--option_hover-color: white; */
+  --theme_dark--option_hover-background: rgb(32, 32, 32);
+
+  /* --theme_dark--danger_text: rgb(235, 87, 87);
+  --theme_dark--danger_border: rgba(235, 87, 87, 0.5); */
+
+  /* --theme_dark--font_title-size: 40px;
+  --theme_dark--font_heading1-size: 30px;
+  --theme_dark--font_heading2-size: 24px;
+  --theme_dark--font_heading3-size: 20px; */
+
+  --theme_dark--text: rgb(228, 228, 228);
+  --theme_dark--text_ui: rgba(211, 211, 211, 0.637);
+  --theme_dark--text_ui_info: rgba(211, 211, 211, 0.466);
+
+  --theme_dark--text_gray: rgba(151, 154, 155, 0.95);
+  --theme_dark--text_brown: rgb(147, 114, 100);
+  --theme_dark--text_orange: rgb(255, 163, 68);
+  --theme_dark--text_yellow: rgb(255, 220, 73);
+  --theme_dark--text_green: rgb(50, 169, 104);
+  --theme_dark--text_blue: rgb(82, 156, 202);
+  --theme_dark--text_purple: rgb(154, 109, 215);
+  --theme_dark--text_pink: rgb(226, 85, 161);
+  --theme_dark--text_red: rgb(218, 47, 35);
+
+  /* --theme_dark--bg_text: var(--theme_dark--text); */
+  --theme_dark--bg_gray: rgba(126, 128, 129, 0.5);
+  --theme_dark--bg_brown: #50331f;
+  --theme_dark--bg_orange: rgba(255, 155, 0, 0.58);
+  --theme_dark--bg_yellow: rgba(183, 155, 0, 1);
+  --theme_dark--bg_green: rgb(50, 129, 47);
+  --theme_dark--bg_blue: rgba(0, 90, 146, 0.71);
+  --theme_dark--bg_purple: rgba(91, 49, 148, 0.74);
+  --theme_dark--bg_pink: rgba(243, 61, 159, 0.5);
+  --theme_dark--bg_red: rgb(122, 20, 20);
+
+  /* --theme_dark--line_text: var(--theme_dark--text); */
+  --theme_dark--line_gray: rgba(126, 128, 129, 0.301);
+  --theme_dark--line_brown: #50331fad;
+  --theme_dark--line_orange: rgba(255, 153, 0, 0.315);
+  --theme_dark--line_yellow: rgba(183, 156, 0, 0.445);
+  --theme_dark--line_green: rgba(50, 129, 47, 0.39);
+  --theme_dark--line_blue: rgba(0, 90, 146, 0.521);
+  --theme_dark--line_purple: rgba(90, 49, 148, 0.349);
+  --theme_dark--line_pink: rgba(243, 61, 158, 0.301);
+  --theme_dark--line_red: rgba(122, 20, 20, 0.623);
+
+  --theme_dark--code_inline-text: #7dc582;
+  --theme_dark--code_inline-background: rgb(8, 8, 8);
+  /* --theme_dark--code_text: var(--theme_dark--text); */
+  --theme_dark--code-background: rgb(8, 8, 8);
+  --theme_dark--code_function: #c7e1ff;
+  --theme_dark--code_keyword: #c397d8;
+  --theme_dark--code_tag: #82aed8;
+  --theme_dark--code_operator: rgb(166, 175, 201);
+  --theme_dark--code_important: #da265f;
+  --theme_dark--code_property: #82aed8;
+  --theme_dark--code_builtin: #ff6294;
+  --theme_dark--code_attr-name: #ff6294;
+  --theme_dark--code_comment: rgb(166, 175, 201);
+  --theme_dark--code_punctuation: rgb(166, 175, 201);
+  --theme_dark--code_doctype: rgb(166, 175, 201);
+  --theme_dark--code_number: #c397d8;
+  --theme_dark--code_string: #7dc582;
+  --theme_dark--code_attr-value: #7dc582;
+}

mods/emoji-sets/mod.js

@@ -0,0 +1,95 @@
+/*
+ * emoji sets
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * under the MIT license
+ */
+
+'use strict';
+
+let tweaked = false;
+
+module.exports = {
+  id: 'a2401ee1-93ba-4b8c-9781-7f570bf5d71e',
+  tags: ['extension'],
+  name: 'emoji sets',
+  desc: 'pick from a variety of emoji styles to use.',
+  version: '0.1.3',
+  author: 'dragonwocky',
+  options: [
+    {
+      key: 'style',
+      label: '',
+      type: 'select',
+      value: [
+        'twitter',
+        'apple',
+        'google',
+        'microsoft',
+        'samsung',
+        'whatsapp',
+        'facebook',
+        'joypixels',
+        'openmoji',
+        'emojidex',
+        'messenger',
+        'lg',
+        'htc',
+        'mozilla',
+      ],
+    },
+  ],
+  hacks: {
+    'renderer/preload.js'(store, __exports) {
+      document.addEventListener('readystatechange', (event) => {
+        if (document.readyState !== 'complete') return false;
+        let queue = [];
+        const observer = new MutationObserver((list, observer) => {
+          if (!queue.length) requestAnimationFrame(process);
+          queue.push(...list);
+        });
+        observer.observe(document.body, {
+          childList: true,
+          subtree: true,
+          characterData: true,
+        });
+        function process() {
+          queue = [];
+
+          // if (
+          //   (store().style === 'microsoft' && process.platform === 'win32') ||
+          //   (store().style === 'apple' && process.platform === 'darwin')
+          // ) {
+          //   document
+          //     .querySelectorAll('.notion-record-icon .notion-emoji')
+          //     .forEach((el) => {
+          //       el.outerHTML = `<span style="font-size: 0.9em; position: relative; bottom: 0.1em; right: 0.05em">
+          //         ${el.getAttribute('alt')}
+          //       </span>`;
+          //     });
+          //   document.querySelectorAll('.notion-emoji').forEach((el) => {
+          //     el.outerHTML = `<span>${el.getAttribute('alt')}</span>`;
+          //   });
+          // } -- attempt load improvement by using actual emojis instead of pictures
+          // ...breaks changing them again after
+
+          if (store().style !== 'twitter' || tweaked) {
+            document
+              .querySelectorAll('[src*="notion-emojis.s3"]:not(.notion-emoji)')
+              .forEach((el) => el.remove());
+            document.querySelectorAll('.notion-emoji').forEach((el) => {
+              el.style.setProperty(
+                'background',
+                `url(https://emojicdn.elk.sh/${el.getAttribute('alt')}?style=${
+                  store().style
+                })`
+              );
+              el.style.setProperty('background-size', 'contain');
+              el.style.setProperty('opacity', '1');
+            });
+            tweaked = true;
+          }
+        }
+      });
+    },
+  },
+};

mods/focus-mode/mod.js

@@ -0,0 +1,18 @@
+/*
+ * focus mode
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 Arecsu
+ * under the MIT license
+ */
+
+'use strict';
+
+module.exports = {
+  id: '5a08598d-bfac-4167-9ae8-2bd0e2ef141e',
+  tags: ['extension'],
+  name: 'focus mode',
+  desc:
+    'hide the titlebar/menubar if the sidebar is closed (will be shown on hover).',
+  version: '0.1.0',
+  author: 'arecsu',
+};

mods/focus-mode/styles.css

@@ -0,0 +1,21 @@
+/*
+ * focus mode
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 Arecsu
+ * under the MIT license
+ */
+
+.notion-sidebar-container[style*='width: 0px;'] + .notion-frame {
+  height: calc(
+    100% - (var(--configured--dragarea_height, 10px) + 45px)
+  ) !important;
+}
+.notion-sidebar-container[style*='width: 0px;'] + .notion-frame .notion-topbar {
+  opacity: 0 !important;
+  transition: opacity 200ms ease-in-out !important;
+}
+.notion-sidebar-container[style*='width: 0px;']
+  + .notion-frame
+  .notion-topbar:hover {
+  opacity: 1 !important;
+}

mods/gameish/mod.js

@@ -0,0 +1,22 @@
+/*
+ * gameish
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 u/LVL100ShrekCultist
+ * under the MIT license
+ */
+
+'use strict';
+
+module.exports = {
+  id: 'ad923617-e76e-408e-9f23-490738a3223f',
+  tags: ['theme', 'dark'],
+  name: 'gameish',
+  desc: 'a purple, "gamer-styled" theme with a blocky-font.',
+  version: '0.1.1',
+  author: {
+    name: 'LVL100ShrekCultist',
+    link: 'https://www.reddit.com/user/LVL100ShrekCultist/',
+    avatar:
+      'https://styles.redditmedia.com/t5_2js69j/styles/profileIcon_jvnzmo30fyq41.jpg',
+  },
+};

mods/gameish/styles.css

@@ -0,0 +1,130 @@
+/*
+ * gameish
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 u/LVL100ShrekCultist
+ * under the MIT license
+ */
+
+@import url('https://fonts.googleapis.com/css2?family=Baumans&family=Comfortaa&family=DM+Mono&family=Gruppo&family=Nova+Mono&family=Offside&family=Press+Start+2P&family=Righteous&display=swap');
+
+:root {
+  --theme_dark--main: #1e1c26;
+  --theme_dark--sidebar: #24222c;
+  /* --theme_dark--overlay: rgba(15, 15, 15, 0.6); */
+  --theme_dark--dragarea: #19181f;
+  /* --theme_dark--preview-width: 977px;
+  --theme_dark--preview-padding: 8rem;
+  --theme_dark--preview_banner-height: 20vh;
+  --theme_dark--page_banner-height: 30vh; */
+
+  --theme_dark--font_sans: 'Offside', -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif,
+    'Segoe UI Emoji', 'Segoe UI Symbol';
+  /* --theme_dark--font_serif: Lyon-Text, Georgia, YuMincho, 'Yu Mincho',
+    'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Songti TC', 'Songti SC',
+    SimSun, 'Nanum Myeongjo', NanumMyeongjo, Batang, serif; */
+  --theme_dark--font_mono: 'DM Mono', iawriter-mono, Nitti, Menlo, Courier,
+    monospace;
+  --theme_dark--font_code: 'DM Mono', SFMono-Regular, Consolas,
+    'Liberation Mono', Menlo, Courier, monospace;
+
+  /* --theme_dark--font_title-size: 40px;
+  --theme_dark--font_heading1-size: 30px;
+  --theme_dark--font_heading2-size: 24px;
+  --theme_dark--font_heading3-size: 20px;
+  --theme_dark--font_label-size: 14px;
+  --theme_dark--font_body-size: 16px;
+  --theme_dark--font_code-size: 12.75px;
+  --theme_dark--font_sidebar-size: 14px; */
+
+  --theme_dark--scrollbar: #221f29;
+  /* --theme_dark--scrollbar-border: transparent; */
+  --theme_dark--scrollbar_hover: #312d3c;
+
+  /* --theme_dark--card: rgb(53, 51, 58); */
+  --theme_dark--gallery: rgba(162, 162, 162, 0.01);
+  --theme_dark--table-border: rgba(148, 148, 184, 0.5);
+  --theme_dark--interactive_hover: #282632;
+  /* --theme_dark--interactive_hover-border: transparent;
+  --theme_dark--button_close: #e81123;
+  --theme_dark--button_close-fill: white; */
+
+  --theme_dark--selected: rgba(85, 68, 156, 0.3);
+  --theme_dark--primary: rgb(106, 47, 200);
+  --theme_dark--primary_hover: rgb(110, 48, 211);
+  --theme_dark--primary_click: rgb(117, 65, 200);
+  --theme_dark--primary_indicator: rgb(150, 84, 226);
+
+  /* --theme_dark--option-color: white;
+  --theme_dark--option-background: transparent;
+  --theme_dark--option_active-color: white;
+  --theme_dark--option_active-background: var(--theme_dark--primary);
+  --theme_dark--option_hover-color: white; */
+  --theme_dark--option_hover-background: rgb(20, 0, 51);
+
+  --theme_dark--danger_text: rgb(235, 87, 87);
+  --theme_dark--danger_border: rgba(235, 87, 87, 0.5);
+
+  --theme_dark--text: rgba(255, 255, 255, 0.9);
+  --theme_dark--text_ui: rgba(255, 255, 255, 0.6);
+  --theme_dark--text_ui_info: rgba(255, 255, 255, 0.4);
+
+  --theme_dark--text_gray: rgba(151, 154, 155, 0.95);
+  --theme_dark--text_brown: rgb(112, 87, 77);
+  /* --theme_dark--text_orange: rgb(255, 163, 68); */
+  --theme_dark--text_yellow: #ffe529;
+  --theme_dark--text_green: #64d97b;
+  /* --theme_dark--text_blue: rgb(82, 156, 202); */
+  --theme_dark--text_purple: #d43cc7;
+  /* --theme_dark--text_pink: rgb(226, 85, 161); */
+  --theme_dark--text_red: #d93939;
+
+  /* --theme_dark--bg_text: var(--theme_dark--text);
+  --theme_dark--bg_gray: rgba(151, 154, 155, 0.5);
+  --theme_dark--bg_brown: rgba(147, 114, 100, 0.5);
+  --theme_dark--bg_orange: rgba(255, 163, 68, 0.5);
+  --theme_dark--bg_yellow: rgba(255, 220, 73, 0.5);
+  --theme_dark--bg_green: rgba(77, 171, 154, 0.5);
+  --theme_dark--bg_blue: rgba(82, 156, 202, 0.5);
+  --theme_dark--bg_purple: rgba(154, 109, 215, 0.5);
+  --theme_dark--bg_pink: rgba(226, 85, 161, 0.5); */
+  --theme_dark--bg_red: rgba(216, 57, 46, 0.5);
+
+  /* --theme_dark--line_text: var(--theme_dark--text);
+  --theme_dark--line_gray: rgb(69, 75, 78); */
+  --theme_dark--line_brown: rgb(78, 57, 48);
+  --theme_dark--line_orange: rgb(136, 80, 48);
+  --theme_dark--line_yellow: #fbe2287c;
+  /* --theme_dark--line_green: rgb(53, 76, 75);
+  --theme_dark--line_blue: rgb(54, 73, 84);
+  --theme_dark--line_purple: rgb(68, 63, 87);
+  --theme_dark--line_pink: rgb(83, 59, 76); */
+  --theme_dark--line_red: rgb(151, 62, 62);
+
+  --theme_dark--code_inline-text: #d9cbec;
+  --theme_dark--code_inline-background: #24222c;
+  /* --theme_dark--code_text: var(--theme_dark--text); */
+  --theme_dark--code-background: #24222c;
+  /* --theme_dark--code_function: rgba(255, 255, 255, 0.9);
+  --theme_dark--code_keyword: hsl(350, 40%, 70%);
+  --theme_dark--code_tag: hsl(350, 40%, 70%);
+  --theme_dark--code_operator: hsl(40, 90%, 60%);
+  --theme_dark--code_important: #e90;
+  --theme_dark--code_property: hsl(350, 40%, 70%);
+  --theme_dark--code_builtin: hsl(75, 70%, 60%);
+  --theme_dark--code_attr-name: hsl(75, 70%, 60%);
+  --theme_dark--code_comment: hsl(30, 20%, 50%);
+  --theme_dark--code_punctuation: rgba(255, 255, 255, 0.9);
+  --theme_dark--code_doctype: hsl(30, 20%, 50%);
+  --theme_dark--code_number: hsl(350, 40%, 70%);
+  --theme_dark--code_string: hsl(75, 70%, 60%);
+  --theme_dark--code_attr-value: hsl(350, 40%, 70%); */
+}
+
+.notion-dark-theme
+  .notion-scroller.vertical.horizontal
+  .notion-table-view
+  .notion-selectable.notion-collection_view-block
+  > :first-child {
+  background: var(--theme--card) !important;
+}

mods/neutral/mod.js

@@ -0,0 +1,17 @@
+/*
+ * neutral
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 Arecsu
+ * under the MIT license
+ */
+
+'use strict';
+
+module.exports = {
+  id: 'c4435543-4705-4d68-8cf7-d11c342f8089',
+  tags: ['theme', 'dark'],
+  name: 'neutral',
+  desc: 'smoother colours and fonts, designed to be more pleasing to the eye.',
+  version: '0.1.0',
+  author: 'arecsu',
+};

mods/neutral/styles.css

@@ -0,0 +1,166 @@
+/*
+ * neutral
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 Arecsu
+ * under the MIT license
+ */
+
+@import url('https://rsms.me/inter/inter.css');
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap');
+
+:root {
+  /** dark **/
+
+  --theme_dark--main: #131313;
+  --theme_dark--sidebar: #171717;
+  --theme_dark--overlay: rgba(15, 15, 15, 0.6);
+  --theme_dark--dragarea: #111111;
+  /* --theme_dark--preview-width: 977px;
+  --theme_dark--preview-padding: 8rem;
+  --theme_dark--preview_banner-height: 20vh;
+  --theme_dark--page_banner-height: 30vh; */
+
+  --theme_dark--font_sans: 'Inter', -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif,
+    'Segoe UI Emoji', 'Segoe UI Symbol';
+  /* --theme_dark--font_serif: Lyon-Text, Georgia, YuMincho, 'Yu Mincho',
+    'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Songti TC', 'Songti SC',
+    SimSun, 'Nanum Myeongjo', NanumMyeongjo, Batang, serif; */
+  --theme_dark--font_mono: 'Roboto Mono', iawriter-mono, Nitti, Menlo, Courier,
+    monospace;
+  --theme_dark--font_code: 'Roboto Mono', SFMono-Regular, Consolas,
+    'Liberation Mono', Menlo, Courier, monospace;
+
+  /* 1.3 supreme ratio. https://www.modularscale.com/ */
+  --theme_dark--font_title-size: 33px;
+  --theme_dark--font_heading1-size: 33px;
+  --theme_dark--font_heading2-size: 25.3px;
+  --theme_dark--font_heading3-size: 19.5px;
+  --theme_dark--font_label-size: 13px;
+  --theme_dark--font_body-size: 15px;
+  --theme_dark--font_code-size: 13.5px;
+  --theme_dark--font_sidebar-size: 14px;
+
+  --theme_dark--scrollbar: #232425;
+  --theme_dark--scrollbar-border: transparent;
+  --theme_dark--scrollbar_hover: #373838;
+
+  --theme_dark--card: #171717;
+  --theme_dark--gallery: rgba(105, 105, 105, 0.05);
+  --theme_dark--table-border: rgba(78, 78, 78, 0.7);
+  --theme_dark--interactive_hover: rgb(29, 29, 29);
+  /* --theme_dark--interactive_hover-border: transparent;
+  --theme_dark--button_close: #e81123;
+  --theme_dark--button_close-fill: white; */
+
+  --theme_dark--selected: #52525244;
+  --theme_dark--primary: #404040;
+  --theme_dark--primary_hover: #6d6d6d;
+  --theme_dark--primary_click: #cacaca;
+  --theme_dark--primary_indicator: #6d6d6d;
+
+  /* --theme_dark--option-color: white;
+  --theme_dark--option-background: transparent;
+  --theme_dark--option_active-color: white;
+  --theme_dark--option_active-background: var(--theme_dark--primary);
+  --theme_dark--option_hover-color: white; */
+  --theme_dark--option_hover-background: #484848;
+
+  --theme_dark--danger_text: #ce535f;
+  --theme_dark--danger_border: #8c3d3d;
+
+  --theme_dark--text: #dadada;
+  --theme_dark--text_ui: #dadadad0;
+  --theme_dark--text_ui_info: #dadadab4;
+
+  --theme_dark--text_gray: #858585;
+  --theme_dark--text_brown: #484848;
+  --theme_dark--text_orange: #ec9873;
+  --theme_dark--text_yellow: #e2c06f;
+  --theme_dark--text_green: #92b178;
+  --theme_dark--text_blue: #719cca;
+  --theme_dark--text_purple: #ab82bb;
+  --theme_dark--text_pink: #d285aa;
+  --theme_dark--text_red: #ce535f;
+
+  /* --theme_dark--bg_text: var(--theme_dark--text); */
+  --theme_dark--bg_gray: #585858;
+  --theme_dark--bg_brown: #333333;
+  --theme_dark--bg_orange: #9a5a3f;
+  --theme_dark--bg_yellow: #b58a46;
+  --theme_dark--bg_green: #657953;
+  --theme_dark--bg_blue: #355475;
+  --theme_dark--bg_purple: #775186;
+  --theme_dark--bg_pink: #8e4b63;
+  --theme_dark--bg_red: #8c3d3d;
+
+  /* --theme_dark--line_text: var(--theme_dark--text); */
+  --theme_dark--line_gray: #585858;
+  --theme_dark--line_brown: #333333;
+  --theme_dark--line_orange: #9a5a3f;
+  --theme_dark--line_yellow: #b58a46;
+  --theme_dark--line_green: #657953;
+  --theme_dark--line_blue: #355475;
+  --theme_dark--line_purple: #775186;
+  --theme_dark--line_pink: #8e4b63;
+  --theme_dark--line_red: #8c3d3d;
+
+  --theme_dark--code_inline-text: var(--theme_dark--text);
+  --theme_dark--code_inline-background: #333333;
+  --theme_dark--code_text: var(--theme_dark--text);
+  --theme_dark--code-background: #0e0e0e;
+  --theme_dark--code_function: var(--theme_dark--text_blue);
+  --theme_dark--code_keyword: var(--theme_dark--text_pink);
+  --theme_dark--code_tag: var(--theme_dark--text_pink);
+  --theme_dark--code_operator: var(--theme_dark--text_yellow);
+  --theme_dark--code_important: var(--theme_dark--text_yellow);
+  --theme_dark--code_property: var(--theme_dark--text_pink);
+  --theme_dark--code_builtin: var(--theme_dark--text_yellow);
+  --theme_dark--code_attr-name: var(--theme_dark--text_yellow);
+  --theme_dark--code_comment: var(--theme_dark--text_gray);
+  --theme_dark--code_punctuation: var(--theme_dark--text_gray);
+  --theme_dark--code_doctype: var(--theme_dark--text_gray);
+  --theme_dark--code_number: var(--theme_dark--text_purple);
+  --theme_dark--code_string: var(--theme_dark--text_orange);
+  --theme_dark--code_attr-value: var(--theme_dark--text_orange);
+}
+
+.notion-dark-theme [placeholder='Heading 1'],
+.notion-dark-theme [placeholder='Heading 2'],
+.notion-dark-theme [placeholder='Heading 3'] {
+  padding: 3px 1px !important;
+}
+
+/* commented out for the time being because they mess with the + :: */
+/* .notion-quote-block {
+  padding-top: 10px;
+  padding-right: 2px;
+  padding-bottom: 12px;
+  padding-left: 2px;
+}
+.notion-selectable.notion-text-block {
+  padding-top: 5px !important;
+} */
+
+/* increase page width */
+.notion-dark-theme .notion-frame .notion-scroller [style*='width: 900px;'] {
+  width: 1000px !important;
+}
+
+/* add space at the bottom of the main frame when sidebar is hidden
+ * -- matches space at top for titlebar */
+.notion-dark-theme .notion-frame {
+  transition: height 300ms ease 0s;
+}
+.notion-dark-theme
+  .notion-sidebar-container[style*='width: 0px;']
+  + .notion-frame {
+  height: calc(100vh - 40px) !important;
+}
+
+/* hide sidebar "new page" button */
+.notion-dark-theme
+  .notion-sidebar
+  > [style*='flex: 0 0 auto; margin-top: auto;'] {
+  display: none !important;
+}

mods/night-shift/mod.js

@@ -0,0 +1,44 @@
+/*
+ * night shift
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * under the MIT license
+ */
+
+'use strict';
+
+module.exports = {
+  id: '9a71bbff-e87d-4a0b-8a2c-a93473113c30',
+  tags: ['extension', 'theme'],
+  name: 'night shift',
+  desc:
+    'sync dark/light theme with the system (overrides normal theme setting).',
+  version: '0.1.0',
+  author: 'dragonwocky',
+  hacks: {
+    'renderer/preload.js'(store, __exports) {
+      document.addEventListener('readystatechange', (event) => {
+        if (document.readyState !== 'complete') return false;
+        const attempt_interval = setInterval(enhance, 500);
+        function enhance() {
+          const notion_elem = document.querySelector('.notion-app-inner');
+          if (!notion_elem) return;
+          clearInterval(attempt_interval);
+          process([{ target: notion_elem }]);
+          const observer = new MutationObserver(process);
+          observer.observe(notion_elem, {
+            attributes: true,
+          });
+          function process(list, observer) {
+            const mode = `notion-app-inner notion-${
+              window.matchMedia('(prefers-color-scheme: dark)').matches
+                ? 'dark'
+                : 'light'
+            }-theme`;
+            if (list[0].target.className !== mode)
+              list[0].target.className = mode;
+          }
+        }
+      });
+    },
+  },
+};

mods/pastel-dark/mod.js

@@ -0,0 +1,22 @@
+/*
+ * pastel dark
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 u/zenith_illinois
+ * under the MIT license
+ */
+
+'use strict';
+
+module.exports = {
+  id: '033bff54-50ba-4cec-bdc0-b2ca7e307085',
+  tags: ['theme', 'dark'],
+  name: 'pastel dark',
+  desc: 'a smooth-transition true dark theme with a hint of pastel.',
+  version: '0.1.0',
+  author: {
+    name: 'zenith_illinois',
+    link: 'https://www.reddit.com/user/zenith_illinois/',
+    avatar:
+      'https://cdn.discordapp.com/avatars/565182533940150283/54f36546ab586298a5df5c238cbaaa4b.png?size=128',
+  },
+};

mods/pastel-dark/styles.css

@@ -0,0 +1,193 @@
+/*
+ * pastel dark
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 u/zenith_illinois
+ * under the MIT license
+ */
+
+@import url('https://rsms.me/inter/inter.css');
+
+:root {
+  --theme_dark--main: #0b0b0b;
+  --theme_dark--sidebar: #0f0f0f;
+  --theme_dark--overlay: rgba(15, 15, 15, 0.6);
+  --theme_dark--dragarea: #0d0d0d;
+  /* --theme_dark--preview-width: 977px;
+  --theme_dark--preview-padding: 8rem;
+  --theme_dark--preview_banner-height: 20vh;
+  --theme_dark--page_banner-height: 30vh; */
+
+  --theme_dark--font_sans: 'Inter', -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif,
+    'Segoe UI Emoji', 'Segoe UI Symbol';
+  /* --theme_dark--font_serif: Lyon-Text, Georgia, YuMincho, 'Yu Mincho',
+    'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Songti TC', 'Songti SC',
+    SimSun, 'Nanum Myeongjo', NanumMyeongjo, Batang, serif;
+  --theme_dark--font_mono: iawriter-mono, Nitti, Menlo, Courier, monospace;
+  --theme_dark--font_code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo,
+    Courier, monospace; */
+
+  /* --theme_dark--font_title-size: 40px;
+  --theme_dark--font_heading1-size: 30px;
+  --theme_dark--font_heading2-size: 24px;
+  --theme_dark--font_heading3-size: 20px;
+  --theme_dark--font_label-size: 14px;
+  --theme_dark--font_body-size: 16px;
+  --theme_dark--font_code-size: 12.75px;
+  --theme_dark--font_sidebar-size: 14px; */
+
+  --theme_dark--scrollbar: #141414;
+  /* --theme_dark--scrollbar-border: transparent; */
+  --theme_dark--scrollbar_hover: #1b1b1b;
+
+  --theme_dark--card: #0f0f0f;
+  --theme_dark--gallery: rgba(8, 8, 8, 0.05);
+  --theme_dark--table-border: rgba(255, 255, 255, 0.1);
+  --theme_dark--interactive_hover: #1e1e1e5c;
+  /* --theme_dark--interactive_hover-border: transparent; */
+  --theme_dark--button_close: #eb5757;
+  /* --theme_dark--button_close-fill: white; */
+
+  --theme_dark--selected: rgba(184, 135, 247, 0.3);
+  --theme_dark--primary: #b887f7;
+  --theme_dark--primary_hover: #08d7c2;
+  --theme_dark--primary_click: #b887f7;
+  --theme_dark--primary_indicator: #08d7c2;
+
+  /* --theme_dark--option-color: white;
+  --theme_dark--option-background: transparent;
+  --theme_dark--option_active-color: white; */
+  --theme_dark--option_active-background: var(--theme_dark--primary);
+  /* --theme_dark--option_hover-color: white; */
+  --theme_dark--option_hover-background: var(--theme_dark--primary_hover);
+
+  --theme_dark--danger_text: #eb5757;
+  --theme_dark--danger_border: rgba(235, 87, 87, 0.5);
+
+  --theme_dark--text: #ffffff;
+  --theme_dark--text_ui: #909090;
+  --theme_dark--text_ui_info: #464646;
+
+  --theme_dark--text_gray: #b1aeab;
+  --theme_dark--text_brown: #d8b6a6;
+  --theme_dark--text_orange: #fde3c0;
+  --theme_dark--text_yellow: #fcde93;
+  --theme_dark--text_green: #b3f5c8;
+  --theme_dark--text_blue: #bfe0fd;
+  --theme_dark--text_purple: #dac7fa;
+  --theme_dark--text_pink: #f7b8dc;
+  --theme_dark--text_red: #f8acb4;
+
+  --theme_dark--bg_text: rgb(55, 53, 47);
+  --theme_dark--bg_gray: #b1aeab;
+  --theme_dark--bg_brown: #d8b6a6;
+  --theme_dark--bg_orange: #fde3c0;
+  --theme_dark--bg_yellow: #fcde93;
+  --theme_dark--bg_green: #b3f5c8;
+  --theme_dark--bg_blue: #bfe0fd;
+  --theme_dark--bg_purple: #dac7fa;
+  --theme_dark--bg_pink: #f7b8dc;
+  --theme_dark--bg_red: #f8acb4;
+
+  --theme_dark--line_text: rgb(55, 53, 47);
+  --theme_dark--line_gray: #c2c1c089;
+  --theme_dark--line_brown: #dacec992;
+  --theme_dark--line_orange: #fff0dc9f;
+  --theme_dark--line_yellow: #ffe6a6ad;
+  --theme_dark--line_green: #c8fdd9a3;
+  --theme_dark--line_blue: #d1e9ffa3;
+  --theme_dark--line_purple: #e3d3ffa8;
+  --theme_dark--line_pink: #fdcce8b1;
+  --theme_dark--line_red: #ffc8ce9e;
+
+  --theme_dark--code_inline-text: #b3f5c8;
+  --theme_dark--code_inline-background: rgb(8, 8, 8);
+  --theme_dark--code_text: var(--theme_dark--text);
+  --theme_dark--code-background: #0f0f0f;
+  --theme_dark--code_function: var(--theme_dark--text_blue);
+  --theme_dark--code_keyword: var(--theme_dark--text_pink);
+  --theme_dark--code_tag: var(--theme_dark--text_pink);
+  --theme_dark--code_operator: var(--theme_dark--text_yellow);
+  --theme_dark--code_important: var(--theme_dark--text_yellow);
+  --theme_dark--code_property: var(--theme_dark--text_pink);
+  --theme_dark--code_builtin: var(--theme_dark--text_yellow);
+  --theme_dark--code_attr-name: var(--theme_dark--text_yellow);
+  --theme_dark--code_comment: var(--theme_dark--text_gray);
+  --theme_dark--code_punctuation: var(--theme_dark--text_gray);
+  --theme_dark--code_doctype: var(--theme_dark--text_gray);
+  --theme_dark--code_number: var(--theme_dark--text_purple);
+  --theme_dark--code_string: var(--theme_dark--text_orange);
+  --theme_dark--code_attr-value: var(--theme_dark--text_orange);
+}
+
+.notion-dark-theme img[src*='/images/onboarding/use-case-note.png'],
+.notion-dark-theme
+  img[src*='/images/onboarding/team-features-illustration.png'] {
+  filter: invert(1) !important;
+}
+.notion-dark-theme img[src*='/images/onboarding/checked.svg'] {
+  filter: hue-rotate(45deg) !important;
+}
+.notion-dark-theme
+  img[style*='display: block; object-fit: cover; border-radius: 100%; width: 90px; height: 90px;'],
+.notion-dark-theme
+  img[style*='display: block; object-fit: cover; border-radius: 3px; width: 56.832px; height: 56.832px; transition: opacity 100ms ease-out 0s;'] {
+  transition: filter 0.4s ease !important;
+}
+.notion-dark-theme
+  img[style*='display: block; object-fit: cover; border-radius: 100%; width: 90px; height: 90px;']:hover,
+.notion-dark-theme
+  img[style*='display: block; object-fit: cover; border-radius: 3px; width: 56.832px; height: 56.832px; transition: opacity 100ms ease-out 0s;']:hover {
+  filter: brightness(1.2);
+}
+
+.notion-dark-theme
+  [style*='font-family: iawriter-mono, Nitti, Menlo, Courier, monospace;'] {
+  filter: hue-rotate(170deg) !important;
+}
+
+.notion-dark-theme
+  .notion-token-remove-button[role*='button'][tabindex*='0']:hover,
+.notion-dark-theme .notion-record-icon {
+  background: transparent !important;
+}
+
+.notion-dark-theme .notion-focusable:focus-within,
+.notion-dark-theme .notion-to_do-block > div > div > div[style*='background:'],
+.notion-dark-theme div[role='button'],
+[style*='height: 4px;']
+  > .notion-selectable.notion-collection_view_page-block
+  > *,
+.notion-dark-theme
+  .notion-calendar-view-day[style*='background: rgb(235, 87, 87);'],
+.DayPicker-Day--today,
+.notion-dark-theme
+  .DayPicker:not(.DayPicker--interactionDisabled)
+  .DayPicker-Day--outside:hover,
+.notion-dark-theme
+  .DayPicker:not(.DayPicker--interactionDisabled)
+  .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--value)
+  .DayPicker-Day.DayPicker-Day--start.DayPicker-Day--selected,
+.notion-dark-theme .DayPicker-Day.DayPicker-Day--range.DayPicker-Day--start,
+.notion-dark-theme .DayPicker-Day.DayPicker-Day--range.DayPicker-Day--end {
+  transition: color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease !important;
+}
+
+.notion-dark-theme [style*='background: rgb(63, 68, 71);'],
+.notion-dark-theme
+  [style*='background: rgb(80, 85, 88);'][style*='color: rgba(255, 255, 255, 0.7)'],
+.notion-dark-theme
+  [style*='background: rgb(80, 85, 88);'][style*='width: 18px;'][style*='height: 18px;'],
+.notion-dark-theme
+  [style*='box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.2) 0px 5px 10px, rgba(15, 15, 15, 0.4) 0px 15px 40px;'],
+.notion-dark-theme [style*='background: rgba(151, 154, 155, 0.5);'],
+.notion-dark-theme [style*='background: rgba(147, 114, 100, 0.5)'],
+.notion-dark-theme [style*='background: rgba(255, 163, 68, 0.5)'],
+.notion-dark-theme [style*='background: rgba(255, 220, 73, 0.5)'],
+.notion-dark-theme [style*='background: rgba(77, 171, 154, 0.5)'],
+.notion-dark-theme [style*='background: rgba(82, 156, 202, 0.5)'],
+.notion-dark-theme [style*='background: rgba(154, 109, 215, 0.5)'],
+.notion-dark-theme [style*='background: rgba(226, 85, 161, 0.5)'],
+.notion-dark-theme [style*='background: rgba(255, 115, 105, 0.5)'] {
+  box-shadow: 0 2px 4px rgb(0 0 0 / 66%) !important;
+}

mods/property-layout/mod.js

@@ -0,0 +1,59 @@
+/*
+ * property layout
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 alexander-kazakov
+ * under the MIT license
+ */
+
+'use strict';
+
+module.exports = {
+  id: '4034a578-7dd3-4633-80c6-f47ac5b7b160',
+  tags: ['extension'],
+  name: 'property layout',
+  desc: 'auto-collapse page properties that usually push down page content.',
+  version: '0.2.1',
+  author: 'alexander-kazakov',
+  hacks: {
+    'renderer/preload.js'(store, __exports) {
+      document.addEventListener('readystatechange', (event) => {
+        if (document.readyState !== 'complete') return false;
+        let queue = [];
+        const observer = new MutationObserver((list, observer) => {
+          if (!queue.length) requestAnimationFrame(() => process(queue));
+          queue.push(...list);
+        });
+        observer.observe(document.body, {
+          childList: true,
+          subtree: true,
+        });
+        function process(list) {
+          queue = [];
+          let properties = document.querySelector(
+            '.notion-scroller.vertical > div:nth-child(2)[style="width: 100%; font-size: 14px;"]'
+          );
+          if (properties) {
+            if (!properties.classList.contains('propertylayout-enhanced')) {
+              properties.classList.add(
+                'propertylayout-enhanced',
+                'propertylayout-hidden'
+              );
+              const toggle = document.createElement('button');
+              toggle.classList.add('propertylayout-toggle');
+              toggle.innerText = '→ show properties';
+              toggle.addEventListener('click', (event) => {
+                properties.classList.toggle('propertylayout-hidden');
+                toggle.innerText = `→ ${
+                  properties.classList.contains('propertylayout-hidden')
+                    ? 'show'
+                    : 'hide'
+                } properties`;
+              });
+              properties.previousElementSibling.append(toggle);
+            }
+          }
+        }
+      });
+    },
+  },
+};

mods/property-layout/styles.css

@@ -0,0 +1,32 @@
+/*
+ * property layout
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 alexander-kazakov
+ * under the MIT license
+ */
+
+.propertylayout-hidden {
+  display: none;
+}
+
+.propertylayout-toggle {
+  width: calc(100% - (2 * (96px + env(safe-area-inset-left))));
+  text-align: left;
+  font-size: 0.85em;
+  margin-bottom: 1em;
+  padding: 0.25em;
+  background: transparent;
+  color: var(--theme--text_ui);
+  border: none;
+  border-radius: 2px;
+  transition: background 200ms;
+}
+[style*='width: 900px'] + .propertylayout-toggle {
+  width: calc(900px - (2 * (96px + env(safe-area-inset-left))));
+}
+.notion-peek-renderer .propertylayout-toggle {
+  width: calc(100% - (2 * var(--theme--preview-padding)));
+}
+.propertylayout-toggle:hover {
+  background: var(--theme--interactive_hover);
+}

mods/right-to-left/mod.js

@@ -0,0 +1,47 @@
+/*
+ * right-to-left
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 Omar Bahareth
+ * under the MIT license
+ */
+
+'use strict';
+
+module.exports = {
+  id: 'b28ee2b9-4d34-4e36-be8a-ab5be3d79f51',
+  tags: ['extension'],
+  name: 'right-to-left',
+  desc: 'enables auto rtl/ltr text direction detection.',
+  version: '1.3.0',
+  author: 'obahareth',
+  hacks: {
+    'renderer/preload.js'(store, __exports) {
+      document.addEventListener('readystatechange', (event) => {
+        if (document.readyState !== 'complete') return false;
+        let queue = [];
+        const observer = new MutationObserver((list, observer) => {
+          if (!queue.length) requestAnimationFrame(() => process(queue));
+          queue.push(...list);
+        });
+        observer.observe(document.body, {
+          childList: true,
+          subtree: true,
+          characterData: true,
+        });
+        function process(list) {
+          queue = [];
+          for (let { target } of list) {
+            if (!target.innerText) continue;
+            if (target.getAttribute('dir') !== 'auto')
+              target.setAttribute('dir', 'auto');
+            if (
+              getComputedStyle(target).getPropertyValue('text-align') !==
+              'start'
+            )
+              target.style.setProperty('text-align', 'start');
+          }
+        }
+      });
+    },
+  },
+};

mods/weekly-view/mod.js

@@ -0,0 +1,53 @@
+/*
+ * weekly view
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 adihd
+ * under the MIT license
+ */
+
+'use strict';
+
+module.exports = {
+  id: '4c7acaea-6596-4590-85e5-8ac5a1455e8f',
+  tags: ['extension'],
+  name: 'weekly view',
+  desc: 'calendar views named "weekly" will show only the 7 days of this week.',
+  version: '0.5.0',
+  author: 'adihd',
+  hacks: {
+    'renderer/preload.js'(store, __exports) {
+      document.addEventListener('readystatechange', (event) => {
+        if (document.readyState !== 'complete') return false;
+        const attempt_interval = setInterval(enhance, 500);
+        function enhance() {
+          const notion_elem = document.querySelector('.notion-frame');
+          if (!notion_elem) return;
+          clearInterval(attempt_interval);
+          process([{ target: notion_elem }]);
+          const observer = new MutationObserver(process);
+          observer.observe(notion_elem, {
+            childList: true,
+            subtree: true,
+          });
+          function process(list, observer) {
+            const collection_view = document.querySelector(
+              '.notion-collection-view-select'
+            );
+            if (!collection_view || collection_view.innerText != 'weekly')
+              return;
+            const days = collection_view.parentElement.parentElement.parentElement.parentElement.getElementsByClassName(
+              'notion-calendar-view-day'
+            );
+            for (let day of days)
+              day.parentElement.parentElement.style.height = 0;
+            if (days.length) {
+              const today = [...days].find((day) => day.style.background);
+              if (today)
+                today.parentElement.parentElement.style.height = '124px';
+            }
+          }
+        }
+      });
+    },
+  },
+};

package.json

@@ -0,0 +1,39 @@
+{
+  "name": "notion-enhancer",
+  "version": "0.8.0-beta",
+  "description": "an enhancer/customiser for the all-in-one productivity workspace notion.so",
+  "main": "index.js",
+  "bin": {
+    "notion-enhancer": "bin.js"
+  },
+  "scripts": {
+    "test": "echo \"no test specified\""
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dragonwocky/notion-enhancer.git"
+  },
+  "keywords": [
+    "notion",
+    "productivity",
+    "mod",
+    "loader",
+    "enhancer",
+    "hack",
+    "macOS",
+    "windows",
+    "linux"
+  ],
+  "author": "dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/dragonwocky/notion-enhancer/issues"
+  },
+  "homepage": "https://dragonwocky.me/notion-enhancer",
+  "dependencies": {
+    "asar": "^3.0.3",
+    "cac": "^6.5.12",
+    "fs-extra": "^9.0.1",
+    "readdir-enhanced": "^6.0.3"
+  }
+}

pkg/apply.js

@@ -0,0 +1,120 @@
+/*
+ * notion-enhancer
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/) (https://dragonwocky.me/)
+ * under the MIT license
+ */
+
+'use strict';
+
+const fs = require('fs-extra'),
+  path = require('path'),
+  { readdirIterator } = require('readdir-enhanced'),
+  { extractAll } = require('asar'),
+  helpers = require('./helpers.js'),
+  { version } = require('../package.json');
+
+// === title ===
+//  ...information
+//  * warning
+//  > prompt
+//  -- response
+//  ~~ exit
+// ### error ###
+
+let __notion = helpers.getNotion();
+module.exports = async function ({ overwrite_version } = {}) {
+  try {
+    await fs.ensureDir(helpers.data_folder);
+
+    // handle pre-existing installations: app.asar present? version set in data folder? overwrite?
+    const check_app = await require('./check.js')();
+    switch (check_app.code) {
+      case 1:
+        console.log(`~~ notion-enhancer v${version} already applied.`);
+        return true;
+      case 2:
+        console.log(` * ${check_app.msg}`);
+        do {
+          process.stdout.write(' > overwrite? [Y/n]: ');
+          overwrite_version = await helpers.readline();
+        } while (
+          overwrite_version &&
+          !['y', 'n'].includes(overwrite_version.toLowerCase())
+        );
+        overwrite_version =
+          !overwrite_version || overwrite_version.toLowerCase() === 'y';
+        if (!overwrite_version) {
+          console.info(' ~~ keeping previous version: exiting.');
+          return false;
+        }
+        console.info(
+          ' -- removing previous enhancements before applying new version.'
+        );
+        await require('./remove.js')({
+          overwrite_asar: true,
+          delete_data: false,
+        });
+    }
+    console.info(' ...unpacking app.asar');
+    const asar_app = path.resolve(`${__notion}/app.asar`);
+    extractAll(asar_app, `${path.resolve(`${__notion}/app`)}`);
+    fs.move(asar_app, path.resolve(`${__notion}/app.asar.bak`));
+
+    // patching launch script target of custom wrappers
+    if (
+      [
+        '/opt/notion-app', // https://aur.archlinux.org/packages/notion-app/
+        '/opt/notion', // https://github.com/jaredallard/notion-app
+      ].includes(__notion)
+    ) {
+      console.info(
+        ' ...patching app launcher (notion-app linux wrappers only).'
+      );
+      for (let bin_path of [
+        `/usr/bin/${__notion.split('/')[2]}`,
+        `${__notion}${__notion.split('/')[2]}`,
+      ]) {
+        const bin_script = await fs.readFile(bin_path, 'utf8');
+        if (bin_script.includes('app.asar')) {
+          await fs.outputFile(
+            bin_path,
+            bin_script
+              .replace('electron app.asar\n', 'electron app\n')
+              .replace('electron6 app.asar\n', 'electron6 app\n')
+          );
+        }
+      }
+    }
+
+    for await (let insertion_target of readdirIterator(
+      path.resolve(`${__notion}/app`),
+      {
+        deep: (stats) => stats.path.indexOf('node_modules') === -1,
+        filter: (stats) => stats.isFile() && stats.path.endsWith('.js'),
+      }
+    )) {
+      insertion_target = path.resolve(`${__notion}/app/${insertion_target}`);
+      fs.appendFile(
+        insertion_target,
+        `\n\n//notion-enhancer\nrequire('${helpers.realpath(
+          __dirname
+        )}/loader.js')(__filename, exports);`
+      );
+    }
+
+    // not resolved, nothing depends on it so it's just a "let it do its thing"
+    console.info(' ...recording enhancement version.');
+    fs.outputFile(
+      path.resolve(`${__notion}/app/ENHANCER_VERSION.txt`),
+      version
+    );
+    fs.outputFile(path.resolve(`${helpers.data_folder}/version.txt`), version);
+
+    console.info(' ~~ success.');
+    return true;
+  } catch (err) {
+    console.error('### ERROR ###');
+    console.error(err);
+    return false;
+  }
+};