mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-05 05:09:03 +00:00
merge js branch into master
This commit is contained in:
commit
bae4c4cc06
GPG Key ID:
C7A48B7846AA706D
2
.gitignore
vendored
2
.gitignore
vendored
@ -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
|
||||
|
||||
42
CHANGELOG.md
42
CHANGELOG.md
@ -1,12 +1,41 @@
|
||||
# changelog
|
||||
|
||||
if something is ~~crossed out~~, then it is no longer a feature included by default,
|
||||
but can still easily be enabled by following instructions in the [docs](README.md).
|
||||
**potential future features (not confirmed)**
|
||||
|
||||
- [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)
|
||||
|
||||
|
||||
99
CONTRIBUTING.md
Normal file
99
CONTRIBUTING.md
Normal file
@ -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.
|
||||
193
DOCUMENTATION.md
Normal file
193
DOCUMENTATION.md
Normal file
@ -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.
|
||||
14
Pipfile
14
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"
|
||||
150
Pipfile.lock
generated
150
Pipfile.lock
generated
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
308
README.md
308
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:
|
||||
|
||||
- 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.
|
||||
want to contribute? check out the [contribution guidelines](CONTRIBUTING.md) and the [documentation](DOCUMENTATION.md).
|
||||
|
||||
## 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/).
|
||||
3. reboot.
|
||||
4. in the appropriate terminal/command line, run `npm install -g asar` (check installation by running `asar`).
|
||||
5. [download this enhancer](https://github.com/dragonwocky/notion-enhancer/archive/master.zip) & 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).
|
||||
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)
|
||||
_a computer restart may be required here._
|
||||
2. install the enhancer globally: run `npm i -g notion-enhancer` in the terminal/command prompt.
|
||||
3. make sure no notion processes are running (check the task manager!), and apply the hack:
|
||||
run `notion-enhancer apply` in the terminal/command prompt.
|
||||
|
||||
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`).
|
||||
2. run `cleaner.py`.
|
||||
3. reboot.
|
||||
4. follow instructions above (ensuring notion _isn't_ running! again, check task manager).
|
||||
For more info, run any command with the `--help` flag:
|
||||
$ notion-enhancer apply --help
|
||||
$ notion-enhancer remove --help
|
||||
$ 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.
|
||||
additionally, if you ever need to change or reset your notion build, the `customiser.py` and `cleaner.py` files will be useful.
|
||||
(it can also be run from the wsl to apply enhancements to the windows app.)
|
||||
|
||||
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
|
||||
[bug report](https://github.com/dragonwocky/notion-enhancer/issues/new?assignees=&labels=bug&template=bug-report.md&title=).
|
||||
a chrome extension may be coming soon for web client support.
|
||||
|
||||
**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
|
||||
[feature request](https://github.com/dragonwocky/notion-enhancer/issues/new?assignees=&labels=enhancement&template=feature-request.md&title=).
|
||||
definitely not! i contacted their support team to check, and the response was awesome:
|
||||
|
||||
"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"
|
||||
symbolised with an arrow. when toggled to point up,
|
||||
notion will remain the top visible window even if not focused.
|
||||
### notion-enhancer core
|
||||
|
||||
### nicer scrollbars
|
||||
**tags:** #core
|
||||
|
||||
i mean, yeah. get rid of those ugly default scrollbars and use nice inconspicuous
|
||||
ones that actually look as if they're part of notion.
|
||||
**description:** the cli, modloader, menu, & tray.
|
||||
|
||||
to add these to the web version, copy lines 74 - 105 from `user.css` into your css customiser.
|
||||
**author**: [dragonwocky](https://github.com/dragonwocky/)
|
||||
|
||||
|
||||
_image: before enhancement_
|
||||
**version**: v0.8.0
|
||||
|
||||
|
||||
_image: after default enhancement_
|
||||
| option | type | default |
|
||||
| ---------------------------- | --------------------------------------------------------------------------------------------- | -------------------------- |
|
||||
| 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
|
||||
|
||||
|
||||
- **reload window**: in addition to the built-in `CmdOrCtrl+R` reload,
|
||||
you can now reload a window with `F5`.
|
||||
- **toggle all notion windows to/from the tray**: `CmdOrCtrl+Shift+A` by default.
|
||||
### custom inserts
|
||||
|
||||
to set your own toggle hotkey, open `customiser.py` and change line 19 (`hotkey = 'CmdOrCtrl+Shift+A'`)
|
||||
to your preference. you will need to run or re-run `customiser.py` afterwards.
|
||||
**tags:** #extension
|
||||
|
||||
### 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)
|
||||
- **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)
|
||||
**version**: v0.1.1
|
||||
|
||||
|
||||
| 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,
|
||||
and a list of various optional styling changes, see [the page on styling](STYLING.md).
|
||||
**description:** render links surrounded with \[\[brackets]] instead of underlined.
|
||||
|
||||
## 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),
|
||||
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.
|
||||
**version**: v0.1.0
|
||||
|
||||
the notion logo belongs entirely to the notion team, and was sourced from their
|
||||
[media kit](https://www.notion.so/Media-Kit-205535b1d9c4440497a3d7a2ac096286).
|
||||
### dark+
|
||||
|
||||
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)` |
|
||||
|
||||
|
||||
|
||||
### emoji sets
|
||||
|
||||
**tags:** #extension
|
||||
|
||||
**description:** pick from a variety of emoji styles to use.
|
||||
|
||||
**author:** [dragonwocky](https://github.com/dragonwocky/)
|
||||
|
||||
**version:** v0.1.3
|
||||
|
||||
|
||||
|
||||
### 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
|
||||
|
||||
|
||||
|
||||
### 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
|
||||
|
||||
|
||||
|
||||
### 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
|
||||
|
||||
|
||||
|
||||
### 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
|
||||
|
||||
|
||||
|
||||
### 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
|
||||
|
||||
|
||||
|
||||
### 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
|
||||
|
||||
|
||||
|
||||
## 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.
|
||||
|
||||
333
STYLING.md
333
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
|
||||
|
||||
|
||||
|
||||
_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.
|
||||
|
||||
|
||||
|
||||
_image: the dark+ theme_
|
||||
|
||||
### hide discussions (comment threads at the top of each page)
|
||||
|
||||
```css
|
||||
.notion-page-view-discussion {
|
||||
display: none !important;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
_image: before styling_
|
||||
|
||||
|
||||
|
||||
_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;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
_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;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
_image: after styling_
|
||||
|
||||
### wider page preview
|
||||
|
||||
```css
|
||||
.notion-peek-renderer > div:nth-child(2) {
|
||||
max-width: 85vw !important;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
_image: before styling_
|
||||
|
||||
|
||||
|
||||
_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;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
_image: before styling_
|
||||
|
||||
|
||||
|
||||
_image: after styling_
|
||||
|
||||
## tables
|
||||
|
||||
|
||||
|
||||
_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;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
_image: after styling_
|
||||
|
||||
### hide '+ new' table row
|
||||
|
||||
```css
|
||||
.notion-table-view-add-row {
|
||||
display: none !important;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
_image: after styling_
|
||||
|
||||
### hide calculations table row
|
||||
|
||||
```css
|
||||
.notion-table-view-add-row + div {
|
||||
display: none !important;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
_image: after styling_
|
||||
|
||||
### centre-align table column headers
|
||||
|
||||
```css
|
||||
.notion-table-view-header-cell > div > div {
|
||||
margin: 0px auto;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
_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;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
_image: after styling_
|
||||
|
||||
### remove icons from table column headers
|
||||
|
||||
```css
|
||||
.notion-table-view-header-cell [style^='margin-right: 6px;'] {
|
||||
display: none !important;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
_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;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
_image: after styling_
|
||||
|
||||
## boards
|
||||
|
||||
|
||||
|
||||
_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;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
_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;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
_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;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
_image: after styling_
|
||||
|
||||
### removing/decreasing side padding for boards
|
||||
|
||||
```css
|
||||
.notion-board-view {
|
||||
padding-left: 10px !important;
|
||||
padding-right: 10px !important;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
_image: after styling_
|
||||
200
TWEAKS.md
Normal file
200
TWEAKS.md
Normal file
@ -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>
|
||||
55
UPDATING.md
Normal file
55
UPDATING.md
Normal file
@ -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.
|
||||
69
bin.js
Normal file
69
bin.js
Normal file
@ -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();
|
||||
75
cleaner.py
75
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}')
|
||||
239
customiser.py
239
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 ===')
|
||||
34
docs.json
34
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/"]
|
||||
]
|
||||
}
|
||||
22
docs/LICENSE
22
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.
|
||||
@ -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'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't require
|
||||
a run of <code>cleaner.py</code> to build modifications.
|
||||
improved: scrollbar colours that fit better with notion'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 & the "+" 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 "short page" 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 & 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>
|
||||
501
docs/docs.css
501
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'; }
|
||||
193
docs/docs.js
193
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);
|
||||
160
docs/index.html
160
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> & 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'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'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'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're sure you know what you're doing (if you have to ask, you probably don't) then do not delete anything.</p>
|
||||
<p><strong>something isn't working, and the suggestions here haven'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, "always on top"
|
||||
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'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 = 'CmdOrCtrl+Shift+A'</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 & 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>
|
||||
BIN
docs/notion.png
BIN
docs/notion.png
Binary file not shown.
|
Before Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 183 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 306 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 210 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 184 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 184 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 221 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 217 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 70 KiB |
@ -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 "CSS". if you don'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 '+ new' table row) it is recommended that you prepend each selector with
|
||||
<code>[data-block-id='ID']</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&family=Oxygen&family=Roboto+Slab:wght@300&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> > <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>
|
||||
> <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">div</span><span class="hljs-selector-pseudo">:nth-child(COL_NUMBER)</span>
|
||||
> <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>
|
||||
> <span class="hljs-selector-attr">[style^=<span class="hljs-string">'position: relative; min-width: calc(100% - 192px);'</span>]</span>
|
||||
> <span class="hljs-selector-attr">[data-block-id]</span>
|
||||
> <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> > <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:nth-child(5)</span> > <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> > <span class="hljs-selector-tag">div</span> > <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> > <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> > <span class="hljs-selector-attr">[data-block-id]</span> > <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> > <span class="hljs-selector-attr">[data-block-id]</span> > <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:first-child</span> > <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> > <span class="hljs-selector-attr">[data-block-id]</span> > <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:last-child</span>,
|
||||
<span class="hljs-selector-class">.notion-board-view</span> > <span class="hljs-selector-attr">[data-block-id]</span> > <span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:first-child</span> > <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 & 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>
|
||||
16
mods/bracketed-links/mod.js
Normal file
16
mods/bracketed-links/mod.js
Normal file
@ -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',
|
||||
};
|
||||
24
mods/bracketed-links/styles.css
Normal file
24
mods/bracketed-links/styles.css
Normal file
@ -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;
|
||||
}
|
||||
102
mods/core/buttons.js
Normal file
102
mods/core/buttons.js
Normal file
@ -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;
|
||||
};
|
||||
147
mods/core/client.js
Normal file
147
mods/core/client.js
Normal file
@ -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') }]);
|
||||
}
|
||||
};
|
||||
4
mods/core/colorjoe/min.js
Normal file
4
mods/core/colorjoe/min.js
Normal file
File diff suppressed because one or more lines are too long
1
mods/core/colorjoe/picker.css
Normal file
1
mods/core/colorjoe/picker.css
Normal file
File diff suppressed because one or more lines are too long
86
mods/core/create.js
Normal file
86
mods/core/create.js
Normal file
@ -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;
|
||||
};
|
||||
45
mods/core/css/buttons.css
Normal file
45
mods/core/css/buttons.css
Normal file
@ -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);
|
||||
}
|
||||
316
mods/core/css/dark.css
Normal file
316
mods/core/css/dark.css
Normal file
@ -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;
|
||||
}
|
||||
337
mods/core/css/light.css
Normal file
337
mods/core/css/light.css
Normal file
@ -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;
|
||||
}
|
||||
207
mods/core/css/localised.css
Normal file
207
mods/core/css/localised.css
Normal file
@ -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);
|
||||
}
|
||||
579
mods/core/css/menu.css
Normal file
579
mods/core/css/menu.css
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
28
mods/core/css/scrollbars.css
Normal file
28
mods/core/css/scrollbars.css
Normal file
@ -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);
|
||||
}
|
||||
228
mods/core/css/shared.css
Normal file
228
mods/core/css/shared.css
Normal file
@ -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;
|
||||
}
|
||||
44
mods/core/css/titlebar.css
Normal file
44
mods/core/css/titlebar.css
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
236
mods/core/css/variables.css
Normal file
236
mods/core/css/variables.css
Normal file
@ -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;
|
||||
}
|
||||
95
mods/core/css/variables.json
Normal file
95
mods/core/css/variables.json
Normal file
@ -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"
|
||||
]
|
||||
1
mods/core/icons/alwaysontop_off.svg
Normal file
1
mods/core/icons/alwaysontop_off.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 237 B |
1
mods/core/icons/alwaysontop_on.svg
Normal file
1
mods/core/icons/alwaysontop_on.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 237 B |
@ -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>
|
||||
|
Before Width: | Height: | Size: 333 B After Width: | Height: | Size: 345 B |
1
mods/core/icons/file.svg
Normal file
1
mods/core/icons/file.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 302 B |
BIN
mods/core/icons/mac+linux.png
Normal file
BIN
mods/core/icons/mac+linux.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
1
mods/core/icons/maximize_off.svg
Normal file
1
mods/core/icons/maximize_off.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 241 B |
1
mods/core/icons/maximize_on.svg
Normal file
1
mods/core/icons/maximize_on.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 331 B |
1
mods/core/icons/minimize.svg
Normal file
1
mods/core/icons/minimize.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 198 B |
BIN
mods/core/icons/user.png
Normal file
BIN
mods/core/icons/user.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
mods/core/icons/windows.ico
Normal file
BIN
mods/core/icons/windows.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 279 KiB |
34
mods/core/menu.html
Normal file
34
mods/core/menu.html
Normal file
@ -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>
|
||||
485
mods/core/menu.js
Normal file
485
mods/core/menu.js
Normal file
@ -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>')
|
||||
// 
|
||||
.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())
|
||||
);
|
||||
};
|
||||
66
mods/core/mod.js
Normal file
66
mods/core/mod.js
Normal file
@ -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'),
|
||||
},
|
||||
};
|
||||
31
mods/core/render.js
Normal file
31
mods/core/render.js
Normal file
@ -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]};`
|
||||
);
|
||||
});
|
||||
};
|
||||
};
|
||||
12
mods/core/styles.css
Normal file
12
mods/core/styles.css
Normal file
@ -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';
|
||||
210
mods/core/tray.js
Normal file
210
mods/core/tray.js
Normal file
@ -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();
|
||||
});
|
||||
});
|
||||
};
|
||||
57
mods/custom-inserts/mod.js
Normal file
57
mods/custom-inserts/mod.js
Normal file
@ -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 = '';
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
52
mods/dark+/mod.js
Normal file
52
mods/dark+/mod.js
Normal file
@ -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()
|
||||
);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
2
mods/dark+/one-color.js
Normal file
2
mods/dark+/one-color.js
Normal file
File diff suppressed because one or more lines are too long
116
mods/dark+/styles.css
Normal file
116
mods/dark+/styles.css
Normal file
@ -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;
|
||||
}
|
||||
95
mods/emoji-sets/mod.js
Normal file
95
mods/emoji-sets/mod.js
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
18
mods/focus-mode/mod.js
Normal file
18
mods/focus-mode/mod.js
Normal file
@ -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',
|
||||
};
|
||||
21
mods/focus-mode/styles.css
Normal file
21
mods/focus-mode/styles.css
Normal file
@ -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;
|
||||
}
|
||||
22
mods/gameish/mod.js
Normal file
22
mods/gameish/mod.js
Normal file
@ -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',
|
||||
},
|
||||
};
|
||||
130
mods/gameish/styles.css
Normal file
130
mods/gameish/styles.css
Normal file
@ -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;
|
||||
}
|
||||
17
mods/neutral/mod.js
Normal file
17
mods/neutral/mod.js
Normal file
@ -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',
|
||||
};
|
||||
166
mods/neutral/styles.css
Normal file
166
mods/neutral/styles.css
Normal file
@ -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;
|
||||
}
|
||||
44
mods/night-shift/mod.js
Normal file
44
mods/night-shift/mod.js
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
22
mods/pastel-dark/mod.js
Normal file
22
mods/pastel-dark/mod.js
Normal file
@ -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',
|
||||
},
|
||||
};
|
||||
193
mods/pastel-dark/styles.css
Normal file
193
mods/pastel-dark/styles.css
Normal file
@ -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;
|
||||
}
|
||||
59
mods/property-layout/mod.js
Normal file
59
mods/property-layout/mod.js
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
32
mods/property-layout/styles.css
Normal file
32
mods/property-layout/styles.css
Normal file
@ -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);
|
||||
}
|
||||
47
mods/right-to-left/mod.js
Normal file
47
mods/right-to-left/mod.js
Normal file
@ -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');
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
53
mods/weekly-view/mod.js
Normal file
53
mods/weekly-view/mod.js
Normal file
@ -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';
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
BIN
notion.png
BIN
notion.png
Binary file not shown.
|
Before Width: | Height: | Size: 7.0 KiB |
39
package.json
Normal file
39
package.json
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
120
pkg/apply.js
Normal file
120
pkg/apply.js
Normal file
@ -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;
|
||||
}
|
||||
};
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user