diff --git a/CHANGELOG.md b/CHANGELOG.md index ec57053..21d015f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,7 +13,7 @@ - bugfix: increase contrast of `--theme_dark--interactive_hover` in dark+ and dracula. - extension: "topbar icons" = replaces the topbar buttons with icons. - extension: "code line numbers" = adds line numbers to code blocks. -- tweak: vertical indentation/relationship lines for bullet points. +- tweak: vertical indentation/relationship lines for lists. - tweak: scroll database toolbars horizontally if partially hidden. - tweak: condense bullet points (decrease line spacing). diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md index 92dc62a..f853ca5 100644 --- a/DOCUMENTATION.md +++ b/DOCUMENTATION.md @@ -70,16 +70,16 @@ module.exports = { }; ``` -| 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\_ | -| 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 \ | -| options | **optional:** see below: options made available in the enhancer menu (accessible from the tray) | _array\_ | -| hacks | **optional:** see below: code inserted at various points | _object_ | +| 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\_ | +| 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 \ | +| options | **optional:** see below: options made available in the enhancer menu (accessible from the tray) | _array\_ | +| 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. @@ -99,14 +99,14 @@ if you'd rather customise this, pass this object: #### 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_ | -| desc | **optional:** extended information to be shown on hover | _string_ | -| type | **required:** input type (see below) | _string_ | -| extensions | **optional:** allowed file extensions (only use with a file option), e.g. `['js', 'ts']` | _array\_ | -| value | **optional:** default or possible value/s for option | see below | +| 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_ | +| desc | **optional:** extended information to be shown on hover | _string_ | +| type | **required:** input type (see below) | _string_ | +| extensions | **optional:** allowed file extensions (only use with a file option), e.g. `['js', 'ts']` | _array\_ | +| value | **optional:** default or possible value/s for option | see below | | platformOverwrite | **optional:** remove the option from the menu and force a value on a specific platform | _\_ as shown above | | type | value | @@ -164,11 +164,12 @@ any files within the `mods` folder can be loaded with the `enhancement://` proto for example, inserting an image from the core mod: ``. - ## `variables.css` **inserted into all windows.** +(put font import statements here too.) + 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. @@ -187,9 +188,9 @@ these are all made possible by the core module. if you believe this set of varia consider opening a pull request to fix those issues - please do not try and reinvent the wheel unnecessarily. > ### using variables -> +> > variables should be defined per-mode, but used without specifying. for example: -> +> > ```css > :root { > --theme_dark--main: rgb(5, 5, 5); @@ -198,7 +199,7 @@ consider opening a pull request to fix those issues - please do not try and rein > 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. @@ -213,4 +214,4 @@ consider opening a pull request to fix those issues - please do not try and rein ## `menu.css` -**inserted into the enhancements menu.** \ No newline at end of file +**inserted into the enhancements menu.** diff --git a/README.md b/README.md index f0f046d..c172c27 100644 --- a/README.md +++ b/README.md @@ -20,38 +20,36 @@ for support, join the [discord server](https://discord.gg/sFWPXtA). - [@haydn-jones](https://github.com/haydn-jones/)'s fork of the linux [notion-deb-builder](https://github.com/haydn-jones/notion-deb-builder). -(it can also be run from the wsl to apply enhancements to the windows app.) - mobile clients are not supported and due to system limitations/restrictions cannot be. a chrome extension may be coming soon for web client support. ## installation -> **if you are updating from v0.7.0,** things have changed, more information is available +> **if you are updating from v0.7.0 or earlier,** things have changed, more information is available > in this [update guide](UPDATING.md). please read that before following these instructions. - ensure that no notion windows/processes are running by ending all Notion processes in your task manager. - - `CMD + ALT + ESC` on mac and `CTRL + SHIFT + ESC` on windows/linux to open task manager + - `CMD + ALT + ESC` on mac and `CTRL + SHIFT + ESC` on windows/linux to open task manager. - [install node.js](https://nodejs.org/en/download/) - - you may need to restart your computer - - notion-enhancer will use node.js, you do not need to interact with it aside from downloading to install notion-enhancer -- open your computer's terminal, **not Node.js command prompt** - - **windows 10:** search in your start menu (click windows key or icon in bottom left of screen) for *'cmd'* or *'command prompt'* - - **mac:** search in spotlight (magnifying glass in top right of screen) for `*terminal*' -- type and enter the following line(s) based on your operating system, if there are multiple lines, make sure to enter them *one by one* + - you may need to restart your computer. + - notion-enhancer will use node.js, you do not need to interact with it aside from downloading to install notion-enhancer. +- open your computer's terminal, **not the node.js command prompt.** + - **windows 10:** search in your start menu (click windows key or icon in bottom left of screen) for *'cmd'* or *'command prompt'*. + - **mac:** search in spotlight (magnifying glass in top right of screen) for *'terminal'*. +- type and enter the following line(s) based on your operating system, if there are multiple lines, make sure to enter them *one by one* . - **windows 10:** ``` npm i -g notion-enhancer ``` - - **mac:** This may ask you to enter your password, instead of hiding your password with *** symbols, mac terminal hides it by making it invisible. Simply type your password and click enter. + - **mac:** this may ask you to enter your password, instead of hiding your password with *** symbols, mac terminal hides it by making it invisible. simply type your password and click enter. ``` sudo chmod -R a+wr /usr/local/lib/node_modules sudo chmod -R a+wr /usr/local/bin sudo chmod -R a+wr /Applications/Notion.app/Contents/Resources npm i -g notion-enhancer ``` - - **debian/ubuntu, chromeOS, WSL (to modify the win10 app):** + - **debian/ubuntu, chromeOS, wsl (to modify the win10 app):** ``` bash curl -sL https://deb.nodesource.com setup_current.x | sudo -E bash - sudo apt-get install -y nodejs diff --git a/mods/bracketed-links/app.css b/mods/bracketed-links/app.css index 12ef85b..0ecca69 100644 --- a/mods/bracketed-links/app.css +++ b/mods/bracketed-links/app.css @@ -1,5 +1,5 @@ /* - * notion-enhancer + * bracketed links * (c) 2020 dragonwocky (https://dragonwocky.me/) * (c) 2020 Arecsu * under the MIT license diff --git a/mods/bracketed-links/mod.js b/mods/bracketed-links/mod.js index 551e979..46cb072 100644 --- a/mods/bracketed-links/mod.js +++ b/mods/bracketed-links/mod.js @@ -1,5 +1,5 @@ /* - * notion-enhancer + * bracketed links * (c) 2020 dragonwocky (https://dragonwocky.me/) * under the MIT license */ diff --git a/mods/cherrycola/app.css b/mods/cherrycola/app.css index 0272928..93af219 100644 --- a/mods/cherrycola/app.css +++ b/mods/cherrycola/app.css @@ -4,146 +4,8 @@ * (c) 2020 dragonwocky (https://dragonwocky.me/) * under the MIT license */ - -:root { - --cola-main: #180915; - --cola-sec: #1d0919; - --cola-tet: #492341; - --cola-info: #9b6890; - --cola-accent: #bf799b; - --cola-gray: #8a8a8a; - --cola-brown: #755241; - --cola-orange: #e6846b; - --cola-yellow: #d7b56e; - --cola-green: #8f9b4f; - --cola-blue: #6ebdb7; - --cola-purple: #813d63; - --cola-pink: #d86f71; - --cola-red: #a33232; - - /* Main */ - --theme_dark--main: var(--cola-main); - --theme_dark--sidebar: var(--cola-sec); - --theme_dark--overlay: rgba(29, 9, 25, 0.5); - --theme_dark--dragarea: #210a1c; - --theme_dark--box-shadow: rgba(20, 0, 16, 0.2) 0px 0px 0px 1px, - rgba(20, 0, 16, 0.2) 0px 2px 4px; - --theme_dark--box-shadow_strong: rgba(20, 0, 16, 0.1) 0px 0px 0px 1px, - rgba(20, 0, 16, 0.2) 0px 3px 6px, rgba(20, 0, 16, 0.4) 0px 9px 24px; - - /* Scrollbar */ - --theme_dark--scrollbar: var(--cola-sec); - --theme_dark--scrollbar_hover: var(--cola-accent); - - /* Database */ - --theme_dark--card: var(--cola-sec); - --theme_dark--gallery: var(--cola-sec); - --theme_dark--select_input: var(--cola-tet); - --theme_dark--table-border: var(--cola-tet); - --theme_dark--ui-border: rgba(73, 35, 65, 0.7); - --theme_dark--interactive_hover: var(--cola-tet); - --theme_dark--button_close: var(--cola-accent); - - /* Select/hover/click */ - --theme_dark--selected: rgba(78, 32, 69, 0.5); - --theme_dark--primary: var(--cola-accent); - --theme_dark--primary_hover: var(--cola-accent); - --theme_dark--primary_click: var(--cola-sec); - --theme_dark--primary_indicator: var(--cola-accent); - - --theme_dark--option_active-background: var(--theme_dark--primary); - --theme_dark--option_hover-background: var(--theme_dark--primary_hover); - - /* Danger */ - --theme_dark--danger_text: #eb5757; - --theme_dark--danger_border: rgba(235, 87, 87, 0.5); - - /* Default text colors */ - --theme_dark--text: #ffffff; - --theme_dark--text_ui: var(--cola-info); - --theme_dark--text_ui_info: var(--cola-info); - - /* Text color options */ - --theme_dark--text_gray: var(--cola-gray); - --theme_dark--text_brown: var(--cola-brown); - --theme_dark--text_orange: var(--cola-orange); - --theme_dark--text_yellow: var(--cola-yellow); - --theme_dark--text_green: var(--cola-green); - --theme_dark--text_blue: var(--cola-blue); - --theme_dark--text_purple: var(--cola-purple); - --theme_dark--text_pink: var(--cola-pink); - --theme_dark--text_red: var(--cola-red); - - --theme_dark--select-text: var(--cola-main); - --theme_dark--select_gray: var(--cola-gray); - --theme_dark--select_brown: var(--cola-brown); - --theme_dark--select_brown-text: #ffffff; - --theme_dark--select_orange: var(--cola-orange); - --theme_dark--select_yellow: var(--cola-yellow); - --theme_dark--select_green: var(--cola-green); - --theme_dark--select_blue: var(--cola-blue); - --theme_dark--select_purple: var(--cola-purple); - --theme_dark--select_purple-text: #ffffff; - --theme_dark--select_pink: var(--cola-pink); - --theme_dark--select_red: var(--cola-red); - --theme_dark--select_red-text: #ffffff; - - --theme_dark--line-text: var(--cola-main); - --theme_dark--line_gray: var(--cola-gray); - --theme_dark--line_brown: var(--cola-brown); - --theme_dark--line_orange: var(--cola-orange); - --theme_dark--line_yellow: var(--cola-yellow); - --theme_dark--line_green: var(--cola-green); - --theme_dark--line_blue: var(--cola-blue); - --theme_dark--line_purple: var(--cola-purple); - --theme_dark--line_pink: var(--cola-pink); - --theme_dark--line_red: var(--cola-red); - - --theme_dark--bg-text: var(--theme_dark--select-text); - --theme_dark--bg_gray: var(--theme_dark--select_gray); - --theme_dark--bg_brown: var(--theme_dark--select_brown); - --theme_dark--bg_orange: var(--theme_dark--select_orange); - --theme_dark--bg_yellow: var(--theme_dark--select_yellow); - --theme_dark--bg_green: var(--theme_dark--select_green); - --theme_dark--bg_blue: var(--theme_dark--select_blue); - --theme_dark--bg_purple: var(--theme_dark--select_purple); - --theme_dark--bg_pink: var(--theme_dark--select_pink); - --theme_dark--bg_red: var(--theme_dark--select_red); - - /* Callout blocks */ - --theme_dark--callout-text: var(--theme_dark--line-text); - --theme_dark--callout_gray: var(--theme_dark--line_gray); - --theme_dark--callout_brown: var(--theme_dark--line_brown); - --theme_dark--callout_orange: var(--theme_dark--line_orange); - --theme_dark--callout_yellow: var(--theme_dark--line_yellow); - --theme_dark--callout_green: var(--theme_dark--line_green); - --theme_dark--callout_blue: var(--theme_dark--line_blue); - --theme_dark--callout_purple: var(--theme_dark--line_purple); - --theme_dark--callout_pink: var(--theme_dark--line_pink); - --theme_dark--callout_red: var(--theme_dark--line_red); - - /* Incline/code text */ - --theme_dark--code_inline-text: var(--cola-accent); - --theme_dark--code_inline-background: var(--cola-main); - --theme_dark--code-text: var(--theme_dark--text); - --theme_dark--code-background: var(--cola-sec); - --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); -} - -/* Quotations as serif */ + +/* quotations as serif */ .notion-dark-theme .notion-quote-block { font-family: Georgia, 'Times New Roman', Times, serif; background-color: var(--cola-sec); diff --git a/mods/cherrycola/variables.css b/mods/cherrycola/variables.css new file mode 100644 index 0000000..45add4e --- /dev/null +++ b/mods/cherrycola/variables.css @@ -0,0 +1,144 @@ +/* + * cherry cola + * (c) 2020 Alexa Baldon (https://github.com/runargs) + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * under the MIT license + */ + +:root { + --cola-main: #180915; + --cola-sec: #1d0919; + --cola-tet: #492341; + --cola-info: #9b6890; + --cola-accent: #bf799b; + --cola-gray: #8a8a8a; + --cola-brown: #755241; + --cola-orange: #e6846b; + --cola-yellow: #d7b56e; + --cola-green: #8f9b4f; + --cola-blue: #6ebdb7; + --cola-purple: #813d63; + --cola-pink: #d86f71; + --cola-red: #a33232; + + /* main */ + --theme_dark--main: var(--cola-main); + --theme_dark--sidebar: var(--cola-sec); + --theme_dark--overlay: rgba(29, 9, 25, 0.5); + --theme_dark--dragarea: #210a1c; + --theme_dark--box-shadow: rgba(20, 0, 16, 0.2) 0px 0px 0px 1px, + rgba(20, 0, 16, 0.2) 0px 2px 4px; + --theme_dark--box-shadow_strong: rgba(20, 0, 16, 0.1) 0px 0px 0px 1px, + rgba(20, 0, 16, 0.2) 0px 3px 6px, rgba(20, 0, 16, 0.4) 0px 9px 24px; + + /* scrollbar */ + --theme_dark--scrollbar: var(--cola-sec); + --theme_dark--scrollbar_hover: var(--cola-accent); + + /* database */ + --theme_dark--card: var(--cola-sec); + --theme_dark--gallery: var(--cola-sec); + --theme_dark--select_input: var(--cola-tet); + --theme_dark--table-border: var(--cola-tet); + --theme_dark--ui-border: rgba(73, 35, 65, 0.7); + --theme_dark--interactive_hover: var(--cola-tet); + --theme_dark--button_close: var(--cola-accent); + + /* select/hover/click */ + --theme_dark--selected: rgba(78, 32, 69, 0.5); + --theme_dark--primary: var(--cola-accent); + --theme_dark--primary_hover: var(--cola-accent); + --theme_dark--primary_click: var(--cola-sec); + --theme_dark--primary_indicator: var(--cola-accent); + + --theme_dark--option_active-background: var(--theme_dark--primary); + --theme_dark--option_hover-background: var(--theme_dark--primary_hover); + + /* danger */ + --theme_dark--danger_text: #eb5757; + --theme_dark--danger_border: rgba(235, 87, 87, 0.5); + + /* default text colors */ + --theme_dark--text: #ffffff; + --theme_dark--text_ui: var(--cola-info); + --theme_dark--text_ui_info: var(--cola-info); + + /* text color options */ + --theme_dark--text_gray: var(--cola-gray); + --theme_dark--text_brown: var(--cola-brown); + --theme_dark--text_orange: var(--cola-orange); + --theme_dark--text_yellow: var(--cola-yellow); + --theme_dark--text_green: var(--cola-green); + --theme_dark--text_blue: var(--cola-blue); + --theme_dark--text_purple: var(--cola-purple); + --theme_dark--text_pink: var(--cola-pink); + --theme_dark--text_red: var(--cola-red); + + --theme_dark--select-text: var(--cola-main); + --theme_dark--select_gray: var(--cola-gray); + --theme_dark--select_brown: var(--cola-brown); + --theme_dark--select_brown-text: #ffffff; + --theme_dark--select_orange: var(--cola-orange); + --theme_dark--select_yellow: var(--cola-yellow); + --theme_dark--select_green: var(--cola-green); + --theme_dark--select_blue: var(--cola-blue); + --theme_dark--select_purple: var(--cola-purple); + --theme_dark--select_purple-text: #ffffff; + --theme_dark--select_pink: var(--cola-pink); + --theme_dark--select_red: var(--cola-red); + --theme_dark--select_red-text: #ffffff; + + --theme_dark--line-text: var(--cola-main); + --theme_dark--line_gray: var(--cola-gray); + --theme_dark--line_brown: var(--cola-brown); + --theme_dark--line_orange: var(--cola-orange); + --theme_dark--line_yellow: var(--cola-yellow); + --theme_dark--line_green: var(--cola-green); + --theme_dark--line_blue: var(--cola-blue); + --theme_dark--line_purple: var(--cola-purple); + --theme_dark--line_pink: var(--cola-pink); + --theme_dark--line_red: var(--cola-red); + + --theme_dark--bg-text: var(--theme_dark--select-text); + --theme_dark--bg_gray: var(--theme_dark--select_gray); + --theme_dark--bg_brown: var(--theme_dark--select_brown); + --theme_dark--bg_orange: var(--theme_dark--select_orange); + --theme_dark--bg_yellow: var(--theme_dark--select_yellow); + --theme_dark--bg_green: var(--theme_dark--select_green); + --theme_dark--bg_blue: var(--theme_dark--select_blue); + --theme_dark--bg_purple: var(--theme_dark--select_purple); + --theme_dark--bg_pink: var(--theme_dark--select_pink); + --theme_dark--bg_red: var(--theme_dark--select_red); + + /* callout blocks */ + --theme_dark--callout-text: var(--theme_dark--line-text); + --theme_dark--callout_gray: var(--theme_dark--line_gray); + --theme_dark--callout_brown: var(--theme_dark--line_brown); + --theme_dark--callout_orange: var(--theme_dark--line_orange); + --theme_dark--callout_yellow: var(--theme_dark--line_yellow); + --theme_dark--callout_green: var(--theme_dark--line_green); + --theme_dark--callout_blue: var(--theme_dark--line_blue); + --theme_dark--callout_purple: var(--theme_dark--line_purple); + --theme_dark--callout_pink: var(--theme_dark--line_pink); + --theme_dark--callout_red: var(--theme_dark--line_red); + + /* incline/code text */ + --theme_dark--code_inline-text: var(--cola-accent); + --theme_dark--code_inline-background: var(--cola-main); + --theme_dark--code-text: var(--theme_dark--text); + --theme_dark--code-background: var(--cola-sec); + --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); +} \ No newline at end of file diff --git a/mods/code-line-numbers/app.css b/mods/code-line-numbers/app.css index ee7a0f8..9b1b277 100644 --- a/mods/code-line-numbers/app.css +++ b/mods/code-line-numbers/app.css @@ -6,20 +6,19 @@ */ .notion-code-block.line-numbers > div { - position: relative; + position: relative; } .code-numbered { - padding-left: 48px !important; + padding-left: 48px !important; } - #code-line-numbers { - font-size: var(--theme--font_code-size) !important; - font-family: var(--theme--font_code) !important; - opacity: 0.5; - text-align: right; - position: absolute; - right: calc(100% - 30px); - overflow: hidden; - pointer-events: none; + font-size: var(--theme--font_code-size) !important; + font-family: var(--theme--font_code) !important; + opacity: 0.5; + text-align: right; + position: absolute; + right: calc(100% - 30px); + overflow: hidden; + pointer-events: none; } diff --git a/mods/code-line-numbers/mod.js b/mods/code-line-numbers/mod.js index c3ac80f..7567e5c 100644 --- a/mods/code-line-numbers/mod.js +++ b/mods/code-line-numbers/mod.js @@ -21,23 +21,23 @@ module.exports = { key: 'single_lined', label: 'show line numbers on single-lined code blocks', type: 'toggle', - value: false - } + value: false, + }, ], hacks: { 'renderer/preload.js'(store, __exports) { document.addEventListener('readystatechange', (event) => { - if (document.readyState !== 'complete') return false; + if (document.readyState !== 'complete') return false; let queue = []; const observer = new MutationObserver((list, observer) => { - if (!queue.length) requestAnimationFrame(() => process(queue)); + if (!queue.length) requestAnimationFrame(() => handle(queue)); queue.push(...list); }); observer.observe(document.body, { childList: true, subtree: true, }); - function process(list) { + function handle(list) { queue = []; for (let { addedNodes } of list) { if ( @@ -48,16 +48,18 @@ module.exports = { ) { const block = addedNodes[0].parentElement.parentElement; if ( - block && + block && block.classList && block.classList.contains('notion-code-block') ) { let numbers = block.querySelector('#code-line-numbers'); if (!numbers) { - numbers = createElement(''); - - const blockStyle = window.getComputedStyle(block.children[0]) - numbers.style.top = blockStyle.paddingTop; + numbers = createElement( + '' + ); + + const blockStyle = window.getComputedStyle(block.children[0]); + numbers.style.top = blockStyle.paddingTop; numbers.style.bottom = blockStyle.paddingBottom; block.append(numbers); @@ -69,10 +71,9 @@ module.exports = { } const lines = Math.round( - numbers.getBoundingClientRect().height / - block.lineHeight + numbers.getBoundingClientRect().height / block.lineHeight ); - + if (lines > 1) { block.children[0].classList.add('code-numbered'); numbers.innerText = Array.from( diff --git a/mods/dark+/app.css b/mods/dark+/variables.css similarity index 100% rename from mods/dark+/app.css rename to mods/dark+/variables.css diff --git a/mods/dracula/app.css b/mods/dracula/app.css index 4400fd0..c92c34f 100644 --- a/mods/dracula/app.css +++ b/mods/dracula/app.css @@ -1,135 +1,10 @@ /* * dracula * (c) 2020 @mimishahzad386#5651 - * (c) 2020 dracula * (c) 2020 dragonwocky (https://dragonwocky.me/) - * (c) 2020 Alexa Baldon (https://github.com/runargs) * under the MIT license */ - -:root { - --theme_dark--main: #282a36; - --theme_dark--sidebar: #21232c; - --theme_dark--overlay: rgba(13, 13, 14, 0.5); - --theme_dark--dragarea: #20222b; - - --theme_dark--font_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', - Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', - 'Segoe UI Symbol'; - - --theme_dark--scrollbar: #393c4d; - --theme_dark--scrollbar_hover: #576591; - - --theme_dark--card: #3c3f50; - --theme_dark--gallery: #323546; - --theme_dark--select_input: #474a5c; - --theme_dark--table-border: #484b59; - --theme_dark--ui-border: var(--theme_dark--table-border); - --theme_dark--interactive_hover: rgba(64, 73, 105, 0.7); - --theme_dark--button_close: #ff5555; - - --theme_dark--selected: rgba(189, 147, 249, 0.3); - --theme_dark--primary: #bd93f9; - --theme_dark--primary_hover: #8be9fd; - --theme_dark--primary_click: #bd93f9; - --theme_dark--primary_indicator: #8be9fd; - - --theme_dark--option_active-background: var(--theme_dark--primary); - --theme_dark--option_hover-background: var(--theme_dark--primary_hover); - - --theme_dark--danger_text: #ff5555; - --theme_dark--danger_border: #ffb86c; - - --theme_dark--text: #f8f8f2; - --theme_dark--text_ui: #f8f8f2; - --theme_dark--text_ui_info: #f8f8f2; - - --theme_dark--text_gray: #807e8d; - --theme_dark--text_brown: #6272a4; - --theme_dark--text_orange: #ffb86c; - --theme_dark--text_yellow: #f1fa8c; - --theme_dark--text_green: #50fa7b; - --theme_dark--text_blue: #8be9fd; - --theme_dark--text_purple: #bd93f9; - --theme_dark--text_pink: #ff79c6; - --theme_dark--text_red: #ff5555; - - --theme_dark--select-text: #000000; - --theme_dark--select_gray: #454158; - --theme_dark--select_gray-text: #f5f5f5; - --theme_dark--select_brown: #6272a4; - --theme_dark--select_brown-text: #f5f5f5; - --theme_dark--select_orange: #ffb86c; - --theme_dark--select_yellow: #f1fa8c; - --theme_dark--select_green: #50fa7b; - --theme_dark--select_blue: #8be9fd; - --theme_dark--select_purple: #bd93f9; - --theme_dark--select_pink: #ff79c6; - --theme_dark--select_red: #ff5555; - --theme_dark--select_red-text: #f5f5f5; - - --theme_dark--bg-text: var(--theme_dark--select-text); - --theme_dark--bg_gray: var(--theme_dark--select_gray); - --theme_dark--bg_gray-text: #f5f5f5; - --theme_dark--bg_brown: var(--theme_dark--select_brown); - --theme_dark--bg_brown-text: #f5f5f5; - --theme_dark--bg_orange: var(--theme_dark--select_orange); - --theme_dark--bg_yellow: var(--theme_dark--select_yellow); - --theme_dark--bg_green: var(--theme_dark--select_green); - --theme_dark--bg_blue: var(--theme_dark--select_blue); - --theme_dark--bg_purple: var(--theme_dark--select_purple); - --theme_dark--bg_pink: var(--theme_dark--select_pink); - --theme_dark--bg_red: var(--theme_dark--select_red); - --theme_dark--bg_red-text: #f5f5f5; - - --theme_dark--line-text: #000000; - --theme_dark--line_gray: #3c3f50; - --theme_dark--line_gray-text: #f5f5f5; - --theme_dark--line_brown: #6272a4; - --theme_dark--line_brown-text: #f5f5f5; - --theme_dark--line_orange: #ffb86c; - --theme_dark--line_yellow: #f1fa8c; - --theme_dark--line_green: #50fa7b; - --theme_dark--line_blue: #8be9fd; - --theme_dark--line_purple: #bd93f9; - --theme_dark--line_pink: #ff79c6; - --theme_dark--line_red: #ff5555; - --theme_dark--line_red-text: #f5f5f5; - - --theme_dark--callout-text: var(--theme_dark--line-text); - --theme_dark--callout_gray: var(--theme_dark--line_gray); - --theme_dark--callout_gray-text: #f5f5f5; - --theme_dark--callout_brown: var(--theme_dark--line_brown); - --theme_dark--callout_brown-text: #f5f5f5; - --theme_dark--callout_orange: var(--theme_dark--line_orange); - --theme_dark--callout_yellow: var(--theme_dark--line_yellow); - --theme_dark--callout_green: var(--theme_dark--line_green); - --theme_dark--callout_blue: var(--theme_dark--line_blue); - --theme_dark--callout_purple: var(--theme_dark--line_purple); - --theme_dark--callout_pink: var(--theme_dark--line_pink); - --theme_dark--callout_red: var(--theme_dark--line_red); - --theme_dark--callout_red-text: #f5f5f5; - - --theme_dark--code_inline-text: #50fa7b; - --theme_dark--code_inline-background: #3c3f50; - --theme_dark--code-text: var(--theme_dark--text); - --theme_dark--code-background: #3c3f50; - --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_ui); - --theme_dark--code_punctuation: #d2d0dc; - --theme_dark--code_doctype: #d2d0dc; - --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'] { diff --git a/mods/dracula/variables.css b/mods/dracula/variables.css new file mode 100644 index 0000000..ccf17c3 --- /dev/null +++ b/mods/dracula/variables.css @@ -0,0 +1,131 @@ +/* + * dracula + * (c) 2020 @mimishahzad386#5651 + * (c) 2020 dracula + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * (c) 2020 Alexa Baldon (https://github.com/runargs) + * under the MIT license + */ + +:root { + --theme_dark--main: #282a36; + --theme_dark--sidebar: #21232c; + --theme_dark--overlay: rgba(13, 13, 14, 0.5); + --theme_dark--dragarea: #20222b; + + --theme_dark--font_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', + Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', + 'Segoe UI Symbol'; + + --theme_dark--scrollbar: #393c4d; + --theme_dark--scrollbar_hover: #576591; + + --theme_dark--card: #3c3f50; + --theme_dark--gallery: #323546; + --theme_dark--select_input: #474a5c; + --theme_dark--table-border: #484b59; + --theme_dark--ui-border: var(--theme_dark--table-border); + --theme_dark--interactive_hover: rgba(64, 73, 105, 0.7); + --theme_dark--button_close: #ff5555; + + --theme_dark--selected: rgba(189, 147, 249, 0.3); + --theme_dark--primary: #bd93f9; + --theme_dark--primary_hover: #8be9fd; + --theme_dark--primary_click: #bd93f9; + --theme_dark--primary_indicator: #8be9fd; + + --theme_dark--option_active-background: var(--theme_dark--primary); + --theme_dark--option_hover-background: var(--theme_dark--primary_hover); + + --theme_dark--danger_text: #ff5555; + --theme_dark--danger_border: #ffb86c; + + --theme_dark--text: #f8f8f2; + --theme_dark--text_ui: #f8f8f2; + --theme_dark--text_ui_info: #f8f8f2; + + --theme_dark--text_gray: #807e8d; + --theme_dark--text_brown: #6272a4; + --theme_dark--text_orange: #ffb86c; + --theme_dark--text_yellow: #f1fa8c; + --theme_dark--text_green: #50fa7b; + --theme_dark--text_blue: #8be9fd; + --theme_dark--text_purple: #bd93f9; + --theme_dark--text_pink: #ff79c6; + --theme_dark--text_red: #ff5555; + + --theme_dark--select-text: #000000; + --theme_dark--select_gray: #454158; + --theme_dark--select_gray-text: #f5f5f5; + --theme_dark--select_brown: #6272a4; + --theme_dark--select_brown-text: #f5f5f5; + --theme_dark--select_orange: #ffb86c; + --theme_dark--select_yellow: #f1fa8c; + --theme_dark--select_green: #50fa7b; + --theme_dark--select_blue: #8be9fd; + --theme_dark--select_purple: #bd93f9; + --theme_dark--select_pink: #ff79c6; + --theme_dark--select_red: #ff5555; + --theme_dark--select_red-text: #f5f5f5; + + --theme_dark--bg-text: var(--theme_dark--select-text); + --theme_dark--bg_gray: var(--theme_dark--select_gray); + --theme_dark--bg_gray-text: #f5f5f5; + --theme_dark--bg_brown: var(--theme_dark--select_brown); + --theme_dark--bg_brown-text: #f5f5f5; + --theme_dark--bg_orange: var(--theme_dark--select_orange); + --theme_dark--bg_yellow: var(--theme_dark--select_yellow); + --theme_dark--bg_green: var(--theme_dark--select_green); + --theme_dark--bg_blue: var(--theme_dark--select_blue); + --theme_dark--bg_purple: var(--theme_dark--select_purple); + --theme_dark--bg_pink: var(--theme_dark--select_pink); + --theme_dark--bg_red: var(--theme_dark--select_red); + --theme_dark--bg_red-text: #f5f5f5; + + --theme_dark--line-text: #000000; + --theme_dark--line_gray: #3c3f50; + --theme_dark--line_gray-text: #f5f5f5; + --theme_dark--line_brown: #6272a4; + --theme_dark--line_brown-text: #f5f5f5; + --theme_dark--line_orange: #ffb86c; + --theme_dark--line_yellow: #f1fa8c; + --theme_dark--line_green: #50fa7b; + --theme_dark--line_blue: #8be9fd; + --theme_dark--line_purple: #bd93f9; + --theme_dark--line_pink: #ff79c6; + --theme_dark--line_red: #ff5555; + --theme_dark--line_red-text: #f5f5f5; + + --theme_dark--callout-text: var(--theme_dark--line-text); + --theme_dark--callout_gray: var(--theme_dark--line_gray); + --theme_dark--callout_gray-text: #f5f5f5; + --theme_dark--callout_brown: var(--theme_dark--line_brown); + --theme_dark--callout_brown-text: #f5f5f5; + --theme_dark--callout_orange: var(--theme_dark--line_orange); + --theme_dark--callout_yellow: var(--theme_dark--line_yellow); + --theme_dark--callout_green: var(--theme_dark--line_green); + --theme_dark--callout_blue: var(--theme_dark--line_blue); + --theme_dark--callout_purple: var(--theme_dark--line_purple); + --theme_dark--callout_pink: var(--theme_dark--line_pink); + --theme_dark--callout_red: var(--theme_dark--line_red); + --theme_dark--callout_red-text: #f5f5f5; + + --theme_dark--code_inline-text: #50fa7b; + --theme_dark--code_inline-background: #3c3f50; + --theme_dark--code-text: var(--theme_dark--text); + --theme_dark--code-background: #3c3f50; + --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_ui); + --theme_dark--code_punctuation: #d2d0dc; + --theme_dark--code_doctype: #d2d0dc; + --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); +} \ No newline at end of file diff --git a/mods/gameish/app.css b/mods/gameish/app.css index 95a9167..03f001d 100644 --- a/mods/gameish/app.css +++ b/mods/gameish/app.css @@ -5,69 +5,6 @@ * under the MIT license */ -:root { - --theme_dark--main: #1e1c26; - --theme_dark--sidebar: #24222c; - --theme_dark--dragarea: #19181f; - - --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_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--scrollbar: #221f29; - --theme_dark--scrollbar_hover: #312d3c; - - --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--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_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_yellow: #ffe529; - --theme_dark--text_green: #64d97b; - --theme_dark--text_purple: #d43cc7; - --theme_dark--text_red: #d93939; - - --theme_dark--select_red: rgba(216, 57, 46, 0.5); - - --theme_dark--bg_brown: rgb(78, 57, 48); - --theme_dark--bg_orange: rgb(136, 80, 48); - --theme_dark--bg_yellow: #fbe2287c; - --theme_dark--bg_red: rgb(151, 62, 62); - - --theme_dark--line_brown: var(--theme_dark--bg_brown); - --theme_dark--line_orange: var(--theme_dark--bg_orange); - --theme_dark--line_yellow: var(--theme_dark--bg_yellow); - --theme_dark--line_red: var(--theme_dark--bg_red); - - --theme_dark--callout_brown: var(--theme_dark--bg_brown); - --theme_dark--callout_orange: var(--theme_dark--bg_orange); - --theme_dark--callout_yellow: var(--theme_dark--bg_yellow); - --theme_dark--callout_red: var(--theme_dark--bg_red); - - --theme_dark--code_inline-text: #d9cbec; - --theme_dark--code_inline-background: #24222c; -} - .notion-dark-theme .notion-scroller.vertical.horizontal .notion-table-view diff --git a/mods/gameish/mod.js b/mods/gameish/mod.js index 793f678..7117738 100644 --- a/mods/gameish/mod.js +++ b/mods/gameish/mod.js @@ -19,7 +19,4 @@ module.exports = { avatar: 'https://styles.redditmedia.com/t5_2js69j/styles/profileIcon_jvnzmo30fyq41.jpg', }, - fonts: [ - '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', - ], }; diff --git a/mods/gameish/variables.css b/mods/gameish/variables.css new file mode 100644 index 0000000..6c964e3 --- /dev/null +++ b/mods/gameish/variables.css @@ -0,0 +1,71 @@ +/* + * gameish + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * (c) 2020 u/LVL100ShrekCultist + * under the MIT license + */ + +@import '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--dragarea: #19181f; + + --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_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--scrollbar: #221f29; + --theme_dark--scrollbar_hover: #312d3c; + + --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--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_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_yellow: #ffe529; + --theme_dark--text_green: #64d97b; + --theme_dark--text_purple: #d43cc7; + --theme_dark--text_red: #d93939; + + --theme_dark--select_red: rgba(216, 57, 46, 0.5); + + --theme_dark--bg_brown: rgb(78, 57, 48); + --theme_dark--bg_orange: rgb(136, 80, 48); + --theme_dark--bg_yellow: #fbe2287c; + --theme_dark--bg_red: rgb(151, 62, 62); + + --theme_dark--line_brown: var(--theme_dark--bg_brown); + --theme_dark--line_orange: var(--theme_dark--bg_orange); + --theme_dark--line_yellow: var(--theme_dark--bg_yellow); + --theme_dark--line_red: var(--theme_dark--bg_red); + + --theme_dark--callout_brown: var(--theme_dark--bg_brown); + --theme_dark--callout_orange: var(--theme_dark--bg_orange); + --theme_dark--callout_yellow: var(--theme_dark--bg_yellow); + --theme_dark--callout_red: var(--theme_dark--bg_red); + + --theme_dark--code_inline-text: #d9cbec; + --theme_dark--code_inline-background: #24222c; +} diff --git a/mods/littilepig-dark/app.css b/mods/littilepig-dark/app.css index cf06d90..34cad66 100644 --- a/mods/littilepig-dark/app.css +++ b/mods/littilepig-dark/app.css @@ -5,123 +5,6 @@ * under the MIT license */ -:root { - --theme_dark--main: #1e1c26; - --theme_dark--sidebar: #24222c; - --theme_dark--dragarea: #19181f; - - --theme_dark--font_sans: 'JetBrains Mono'; - --theme_dark--font_serif: 'JetBrains Mono'; - --theme_dark--font_mono: 'JetBrains Mono'; - --theme_dark--font_code: 'JetBrains Mono'; - - --theme_dark--scrollbar: #221f29; - --theme_dark--scrollbar_hover: #312d3c; - - --theme_dark--card: #24222c; - --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--selected: #9500ff6b; - --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_hover-background: rgb(20, 0, 51); - - --theme_dark--text: rgba(200, 200, 200, 0.8); - - /* 文本颜色 */ - --theme_dark--text_brown: rgb(177, 144, 131); - --theme_dark--text_green: rgb(66, 222, 137); - --theme_dark--text_blue: rgb(0, 157, 255); - --theme_dark--text_purple: rgb(162, 94, 255); - --theme_dark--text_red: rgb(240, 52, 38); - - /* 文本背景色 */ - --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_red: rgb(151, 62, 62); - - /* 标题色 */ - --littlepig_dark--h1_text: #c264fe; - --littlepig_dark--h2_text: #e2bafe; - --littlepig_dark--h3_text: #7b08fa; - - /* todo */ - --theme_dark--option_active-color: #7b08fa; - --theme_dark--option_active-background: #1d1c26; - - /* inline code */ - --theme_dark--code_inline-text: #e0dfe2; - --theme_dark--code_inline-background: rgb(179, 39, 39); - --theme_dark--code_function: rgb(179, 146, 240); - --theme_dark--code_number: hsl(159, 69%, 39%); - - /* 标签颜色 + 文本背景色 */ - --theme_dark--bg_gray: rgb(234, 234, 234); - --theme_dark--bg_gray-text: rgb(17, 17, 17); - --theme_dark--bg_brown: rgb(206, 206, 206); - --theme_dark--bg_brown-text: rgb(85, 35, 1); - --theme_dark--bg_orange: rgb(254, 214, 155); - --theme_dark--bg_orange-text: rgb(199, 110, 0); - --theme_dark--bg_yellow: #fcffd8; - --theme_dark--bg_yellow-text: #ff8c22; - --theme_dark--bg_green: #d5fded; - --theme_dark--bg_green-text: #006a00; - --theme_dark--bg_blue: #e2f5ff; - --theme_dark--bg_blue-text: #00b2ff; - --theme_dark--bg_purple: #efe6ff; - --theme_dark--bg_purple-text: #8334ff; - --theme_dark--bg_pink: #ffe9f1; - --theme_dark--bg_pink-text: rgb(255, 0, 127); - --theme_dark--bg_red: rgb(251, 228, 228); - --theme_dark--bg_red-text: rgb(138, 0, 10); - - --theme_dark--select_gray: rgb(234, 234, 234); - --theme_dark--select_gray-text: rgb(17, 17, 17); - --theme_dark--select_brown: rgb(206, 206, 206); - --theme_dark--select_brown-text: rgb(85, 35, 1); - --theme_dark--select_orange: rgb(254, 214, 155); - --theme_dark--select_orange-text: rgb(199, 110, 0); - --theme_dark--select_yellow: #fcffd8; - --theme_dark--select_yellow-text: #ff8c22; - --theme_dark--select_green: #d5fded; - --theme_dark--select_green-text: #006a00; - --theme_dark--select_blue: #e2f5ff; - --theme_dark--select_blue-text: #00b2ff; - --theme_dark--select_purple: #efe6ff; - --theme_dark--select_purple-text: #8334ff; - --theme_dark--select_pink: #ffe9f1; - --theme_dark--select_pink-text: rgb(255, 0, 127); - --theme_dark--select_red: rgb(251, 228, 228); - --theme_dark--select_red-text: rgb(138, 0, 10); - - /* callout 颜色 */ - --theme_dark--callout_gray: #e2e3e5; - --theme_dark--callout_gray-text: #383d41; - --theme_dark--callout_brown: rgb(130, 118, 111); - --theme_dark--callout_brown-text: rgb(85, 35, 1); - --theme_dark--callout_orange: rgb(254, 214, 155); - --theme_dark--callout_orange-text: rgb(255, 140, 0); - --theme_dark--callout_yellow: #fcffd8; - --theme_dark--callout_yellow-text: #c76e00; - --theme_dark--callout_green: #d4edda; - --theme_dark--callout_green-text: #155724; - --theme_dark--callout_blue: #cce5ff; - --theme_dark--callout_blue-text: #004085; - --theme_dark--callout_purple: rgb(199, 178, 230); - --theme_dark--callout_purple-text: rgb(90, 49, 148); - --theme_dark--callout_pink: rgb(255, 206, 228); - --theme_dark--callout_pink-text: rgb(255, 0, 127); - --theme_dark--callout_red: #f8d7da; - --theme_dark--callout_red-text: #721c24; -} - /* todo 颜色 */ .notion-body.dark .notion-dark-theme [style*='background: rgb(46, 170, 220)'], .notion-body.dark diff --git a/mods/littilepig-dark/mod.js b/mods/littilepig-dark/mod.js index 469127c..b34db0a 100644 --- a/mods/littilepig-dark/mod.js +++ b/mods/littilepig-dark/mod.js @@ -19,5 +19,4 @@ module.exports = { avatar: 'https://styles.redditmedia.com/t5_110nz4/styles/profileIcon_h1m3b16exoi51.jpg', }, - fonts: ['https://dev-cats.github.io/code-snippets/JetBrainsMono.css'], }; diff --git a/mods/littilepig-dark/variables.css b/mods/littilepig-dark/variables.css new file mode 100644 index 0000000..faa29a1 --- /dev/null +++ b/mods/littilepig-dark/variables.css @@ -0,0 +1,125 @@ +/* + * littlepig + * (c) 2020 dragonwocky + * (c) 2020 Lizishan + * under the MIT license + */ + +@import 'https://dev-cats.github.io/code-snippets/JetBrainsMono.css'; + +:root { + --theme_dark--main: #1e1c26; + --theme_dark--sidebar: #24222c; + --theme_dark--dragarea: #19181f; + + --theme_dark--font_sans: 'JetBrains Mono'; + --theme_dark--font_serif: 'JetBrains Mono'; + --theme_dark--font_mono: 'JetBrains Mono'; + --theme_dark--font_code: 'JetBrains Mono'; + + --theme_dark--scrollbar: #221f29; + --theme_dark--scrollbar_hover: #312d3c; + + --theme_dark--card: #24222c; + --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--selected: #9500ff6b; + --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_hover-background: rgb(20, 0, 51); + + --theme_dark--text: rgba(200, 200, 200, 0.8); + + /* 文本颜色 */ + --theme_dark--text_brown: rgb(177, 144, 131); + --theme_dark--text_green: rgb(66, 222, 137); + --theme_dark--text_blue: rgb(0, 157, 255); + --theme_dark--text_purple: rgb(162, 94, 255); + --theme_dark--text_red: rgb(240, 52, 38); + + /* 文本背景色 */ + --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_red: rgb(151, 62, 62); + + /* 标题色 */ + --littlepig_dark--h1_text: #c264fe; + --littlepig_dark--h2_text: #e2bafe; + --littlepig_dark--h3_text: #7b08fa; + + /* todo */ + --theme_dark--option_active-color: #7b08fa; + --theme_dark--option_active-background: #1d1c26; + + /* inline code */ + --theme_dark--code_inline-text: #e0dfe2; + --theme_dark--code_inline-background: rgb(179, 39, 39); + --theme_dark--code_function: rgb(179, 146, 240); + --theme_dark--code_number: hsl(159, 69%, 39%); + + /* 标签颜色 + 文本背景色 */ + --theme_dark--bg_gray: rgb(234, 234, 234); + --theme_dark--bg_gray-text: rgb(17, 17, 17); + --theme_dark--bg_brown: rgb(206, 206, 206); + --theme_dark--bg_brown-text: rgb(85, 35, 1); + --theme_dark--bg_orange: rgb(254, 214, 155); + --theme_dark--bg_orange-text: rgb(199, 110, 0); + --theme_dark--bg_yellow: #fcffd8; + --theme_dark--bg_yellow-text: #ff8c22; + --theme_dark--bg_green: #d5fded; + --theme_dark--bg_green-text: #006a00; + --theme_dark--bg_blue: #e2f5ff; + --theme_dark--bg_blue-text: #00b2ff; + --theme_dark--bg_purple: #efe6ff; + --theme_dark--bg_purple-text: #8334ff; + --theme_dark--bg_pink: #ffe9f1; + --theme_dark--bg_pink-text: rgb(255, 0, 127); + --theme_dark--bg_red: rgb(251, 228, 228); + --theme_dark--bg_red-text: rgb(138, 0, 10); + + --theme_dark--select_gray: rgb(234, 234, 234); + --theme_dark--select_gray-text: rgb(17, 17, 17); + --theme_dark--select_brown: rgb(206, 206, 206); + --theme_dark--select_brown-text: rgb(85, 35, 1); + --theme_dark--select_orange: rgb(254, 214, 155); + --theme_dark--select_orange-text: rgb(199, 110, 0); + --theme_dark--select_yellow: #fcffd8; + --theme_dark--select_yellow-text: #ff8c22; + --theme_dark--select_green: #d5fded; + --theme_dark--select_green-text: #006a00; + --theme_dark--select_blue: #e2f5ff; + --theme_dark--select_blue-text: #00b2ff; + --theme_dark--select_purple: #efe6ff; + --theme_dark--select_purple-text: #8334ff; + --theme_dark--select_pink: #ffe9f1; + --theme_dark--select_pink-text: rgb(255, 0, 127); + --theme_dark--select_red: rgb(251, 228, 228); + --theme_dark--select_red-text: rgb(138, 0, 10); + + /* callout 颜色 */ + --theme_dark--callout_gray: #e2e3e5; + --theme_dark--callout_gray-text: #383d41; + --theme_dark--callout_brown: rgb(130, 118, 111); + --theme_dark--callout_brown-text: rgb(85, 35, 1); + --theme_dark--callout_orange: rgb(254, 214, 155); + --theme_dark--callout_orange-text: rgb(255, 140, 0); + --theme_dark--callout_yellow: #fcffd8; + --theme_dark--callout_yellow-text: #c76e00; + --theme_dark--callout_green: #d4edda; + --theme_dark--callout_green-text: #155724; + --theme_dark--callout_blue: #cce5ff; + --theme_dark--callout_blue-text: #004085; + --theme_dark--callout_purple: rgb(199, 178, 230); + --theme_dark--callout_purple-text: rgb(90, 49, 148); + --theme_dark--callout_pink: rgb(255, 206, 228); + --theme_dark--callout_pink-text: rgb(255, 0, 127); + --theme_dark--callout_red: #f8d7da; + --theme_dark--callout_red-text: #721c24; +} diff --git a/mods/littlepig-light/app.css b/mods/littlepig-light/app.css index cc69dc0..463fc34 100644 --- a/mods/littlepig-light/app.css +++ b/mods/littlepig-light/app.css @@ -5,102 +5,6 @@ * under the MIT license */ -:root { - --theme_light--font_sans: 'JetBrains Mono'; - --theme_light--font_serif: 'JetBrains Mono'; - --theme_light--font_mono: 'JetBrains Mono'; - --theme_light--font_code: 'JetBrains Mono'; - - --theme_light--selected: rgba(177, 24, 24, 0.22); - --theme_light--primary: rgb(177, 24, 24); - --theme_light--primary_hover: rgb(202, 26, 26); - --theme_light--primary_click: rgb(219, 41, 41); - --theme_light--primary_indicator: rgb(202, 26, 26); - - /* 文本颜色 */ - --theme_light--text_gray: rgba(151, 154, 155, 0.95); - --theme_light--text_brown: rgb(167, 126, 100); - --theme_light--text_orange: rgb(255, 134, 0); - --theme_light--text_yellow: rgb(255, 195, 0); - --theme_light--text_green: rgb(0, 171, 0); - --theme_light--text_blue: rgb(0, 121, 255); - --theme_light--text_purple: rgb(126, 0, 255); - --theme_light--text_pink: rgb(255, 0, 208); - --theme_light--text_red: rgb(255, 0, 0); - - /* 文本背景色 */ - --theme_light--bg_gray: rgb(234, 234, 234); - --theme_light--bg_gray-text: rgb(17, 17, 17); - --theme_light--bg_brown: rgb(206, 206, 206); - --theme_light--bg_brown-text: rgb(85, 35, 1); - --theme_light--bg_orange: rgb(254, 214, 155); - --theme_light--bg_orange-text: rgb(199, 110, 0); - --theme_light--bg_yellow: #fcffd8; - --theme_light--bg_yellow-text: #ff8c22; - --theme_light--bg_green: #d5fded; - --theme_light--bg_green-text: #006a00; - --theme_light--bg_blue: #e2f5ff; - --theme_light--bg_blue-text: #00b2ff; - --theme_light--bg_purple: #efe6ff; - --theme_light--bg_purple-text: #8334ff; - --theme_light--bg_pink: #ffe9f1; - --theme_light--bg_pink-text: rgb(255, 0, 127); - --theme_light--bg_red: rgb(248, 215, 218); - --theme_light--bg_red-text: rgb(138, 0, 10); - - --theme_light--select_gray: rgb(234, 234, 234); - --theme_light--select_gray-text: rgb(17, 17, 17); - --theme_light--select_brown: rgb(206, 206, 206); - --theme_light--select_brown-text: rgb(85, 35, 1); - --theme_light--select_orange: rgb(254, 214, 155); - --theme_light--select_orange-text: rgb(199, 110, 0); - --theme_light--select_yellow: #fcffd8; - --theme_light--select_yellow-text: #ff8c22; - --theme_light--select_green: #d5fded; - --theme_light--select_green-text: #006a00; - --theme_light--select_blue: #e2f5ff; - --theme_light--select_blue-text: #00b2ff; - --theme_light--select_purple: #efe6ff; - --theme_light--select_purple-text: #8334ff; - --theme_light--select_pink: #ffe9f1; - --theme_light--select_pink-text: rgb(255, 0, 127); - --theme_light--select_red: rgb(248, 215, 218); - --theme_light--select_red-text: rgb(138, 0, 10); - - /* 标题色 */ - --littlepig_light--h1_text: #008800; - --littlepig_light--h2_text: #006a00; - --littlepig_light--h3_text: #003e00; - - /* todo */ - --theme_light--option_active-color: #008800; - --theme_light--option_active-background: #ffffff; - - /* inline code */ - --theme_light--code_inline-text: #e0dfe2; - --theme_light--code_inline-background: rgb(179, 39, 39); - - /* callout 颜色 */ - --theme_light--callout_gray: #e2e3e5; - --theme_light--callout_gray-text: #383d41; - --theme_light--callout_brown: rgb(130, 118, 111); - --theme_light--callout_brown-text: rgb(85, 35, 1); - --theme_light--callout_orange: rgb(254, 214, 155); - --theme_light--callout_orange-text: rgb(255, 140, 0); - --theme_light--callout_yellow: #fcffd8; - --theme_light--callout_yellow-text: #c76e00; - --theme_light--callout_green: #d4edda; - --theme_light--callout_green-text: #155724; - --theme_light--callout_blue: #cce5ff; - --theme_light--callout_blue-text: #004085; - --theme_light--callout_purple: rgb(199, 178, 230); - --theme_light--callout_purple-text: rgb(90, 49, 148); - --theme_light--callout_pink: rgb(255, 206, 228); - --theme_light--callout_pink-text: rgb(255, 0, 127); - --theme_light--callout_red: #f8d7da; - --theme_light--callout_red-text: #721c24; -} - /* todo 颜色 */ .notion-body:not(.dark) .notion-light-theme diff --git a/mods/littlepig-light/mod.js b/mods/littlepig-light/mod.js index 319d127..c10ed64 100644 --- a/mods/littlepig-light/mod.js +++ b/mods/littlepig-light/mod.js @@ -19,5 +19,4 @@ module.exports = { avatar: 'https://styles.redditmedia.com/t5_110nz4/styles/profileIcon_h1m3b16exoi51.jpg', }, - fonts: ['https://dev-cats.github.io/code-snippets/JetBrainsMono.css'], }; diff --git a/mods/littlepig-light/variables.css b/mods/littlepig-light/variables.css new file mode 100644 index 0000000..8f81ea8 --- /dev/null +++ b/mods/littlepig-light/variables.css @@ -0,0 +1,104 @@ +/* + * littlepig + * (c) 2020 dragonwocky + * (c) 2020 Lizishan + * under the MIT license + */ + +@import 'https://dev-cats.github.io/code-snippets/JetBrainsMono.css'; + +:root { + --theme_light--font_sans: 'JetBrains Mono'; + --theme_light--font_serif: 'JetBrains Mono'; + --theme_light--font_mono: 'JetBrains Mono'; + --theme_light--font_code: 'JetBrains Mono'; + + --theme_light--selected: rgba(177, 24, 24, 0.22); + --theme_light--primary: rgb(177, 24, 24); + --theme_light--primary_hover: rgb(202, 26, 26); + --theme_light--primary_click: rgb(219, 41, 41); + --theme_light--primary_indicator: rgb(202, 26, 26); + + /* 文本颜色 */ + --theme_light--text_gray: rgba(151, 154, 155, 0.95); + --theme_light--text_brown: rgb(167, 126, 100); + --theme_light--text_orange: rgb(255, 134, 0); + --theme_light--text_yellow: rgb(255, 195, 0); + --theme_light--text_green: rgb(0, 171, 0); + --theme_light--text_blue: rgb(0, 121, 255); + --theme_light--text_purple: rgb(126, 0, 255); + --theme_light--text_pink: rgb(255, 0, 208); + --theme_light--text_red: rgb(255, 0, 0); + + /* 文本背景色 */ + --theme_light--bg_gray: rgb(234, 234, 234); + --theme_light--bg_gray-text: rgb(17, 17, 17); + --theme_light--bg_brown: rgb(206, 206, 206); + --theme_light--bg_brown-text: rgb(85, 35, 1); + --theme_light--bg_orange: rgb(254, 214, 155); + --theme_light--bg_orange-text: rgb(199, 110, 0); + --theme_light--bg_yellow: #fcffd8; + --theme_light--bg_yellow-text: #ff8c22; + --theme_light--bg_green: #d5fded; + --theme_light--bg_green-text: #006a00; + --theme_light--bg_blue: #e2f5ff; + --theme_light--bg_blue-text: #00b2ff; + --theme_light--bg_purple: #efe6ff; + --theme_light--bg_purple-text: #8334ff; + --theme_light--bg_pink: #ffe9f1; + --theme_light--bg_pink-text: rgb(255, 0, 127); + --theme_light--bg_red: rgb(248, 215, 218); + --theme_light--bg_red-text: rgb(138, 0, 10); + + --theme_light--select_gray: rgb(234, 234, 234); + --theme_light--select_gray-text: rgb(17, 17, 17); + --theme_light--select_brown: rgb(206, 206, 206); + --theme_light--select_brown-text: rgb(85, 35, 1); + --theme_light--select_orange: rgb(254, 214, 155); + --theme_light--select_orange-text: rgb(199, 110, 0); + --theme_light--select_yellow: #fcffd8; + --theme_light--select_yellow-text: #ff8c22; + --theme_light--select_green: #d5fded; + --theme_light--select_green-text: #006a00; + --theme_light--select_blue: #e2f5ff; + --theme_light--select_blue-text: #00b2ff; + --theme_light--select_purple: #efe6ff; + --theme_light--select_purple-text: #8334ff; + --theme_light--select_pink: #ffe9f1; + --theme_light--select_pink-text: rgb(255, 0, 127); + --theme_light--select_red: rgb(248, 215, 218); + --theme_light--select_red-text: rgb(138, 0, 10); + + /* 标题色 */ + --littlepig_light--h1_text: #008800; + --littlepig_light--h2_text: #006a00; + --littlepig_light--h3_text: #003e00; + + /* todo */ + --theme_light--option_active-color: #008800; + --theme_light--option_active-background: #ffffff; + + /* inline code */ + --theme_light--code_inline-text: #e0dfe2; + --theme_light--code_inline-background: rgb(179, 39, 39); + + /* callout 颜色 */ + --theme_light--callout_gray: #e2e3e5; + --theme_light--callout_gray-text: #383d41; + --theme_light--callout_brown: rgb(130, 118, 111); + --theme_light--callout_brown-text: rgb(85, 35, 1); + --theme_light--callout_orange: rgb(254, 214, 155); + --theme_light--callout_orange-text: rgb(255, 140, 0); + --theme_light--callout_yellow: #fcffd8; + --theme_light--callout_yellow-text: #c76e00; + --theme_light--callout_green: #d4edda; + --theme_light--callout_green-text: #155724; + --theme_light--callout_blue: #cce5ff; + --theme_light--callout_blue-text: #004085; + --theme_light--callout_purple: rgb(199, 178, 230); + --theme_light--callout_purple-text: rgb(90, 49, 148); + --theme_light--callout_pink: rgb(255, 206, 228); + --theme_light--callout_pink-text: rgb(255, 0, 127); + --theme_light--callout_red: #f8d7da; + --theme_light--callout_red-text: #721c24; +} diff --git a/mods/material-ocean/app.css b/mods/material-ocean/variables.css similarity index 100% rename from mods/material-ocean/app.css rename to mods/material-ocean/variables.css diff --git a/mods/neutral/app.css b/mods/neutral/app.css index c0f8274..ffac700 100644 --- a/mods/neutral/app.css +++ b/mods/neutral/app.css @@ -5,148 +5,12 @@ * under the MIT license */ -:root { - /** dark **/ - - --theme_dark--main: #131313; - --theme_dark--sidebar: #161616; - --theme_dark--overlay: rgba(15, 15, 15, 0.6); - --theme_dark--dragarea: #111111; - --theme_dark--box-shadow: rgba(15, 15, 15, 0.5) 0px 0px 0px 1px, - rgba(15, 15, 15, 0.5) 0px 2px 4px; - - --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_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: 2.2em; - --theme_dark--font_heading2-size: 1.687em; - --theme_dark--font_heading3-size: 1.3em; - --theme_dark--font_label-size: 14px; - --theme_dark--font_body-size: 15px; - --theme_dark--font_body-size_small: 13.5px; - --theme_dark--font_code-size: 0.9em; - --theme_dark--font_sidebar-size: 14px; - - --theme_dark--scrollbar: #232425; - --theme_dark--scrollbar-border: transparent; - --theme_dark--scrollbar_hover: #373838; - - --theme_dark--card: #181818; - --theme_dark--gallery: rgba(105, 105, 105, 0.05); - --theme_dark--select_input: #1d1d1d; - --theme_dark--table-border: rgba(78, 78, 78, 0.7); - --theme_dark--ui-border: var(--theme_dark--table-border); - --theme_dark--interactive_hover: rgb(29, 29, 29); - - --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_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_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_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--select_gray: var(--theme_dark--bg_gray); - --theme_dark--select_brown: var(--theme_dark--bg_brown); - --theme_dark--select_orange: var(--theme_dark--bg_orange); - --theme_dark--select_yellow: var(--theme_dark--bg_yellow); - --theme_dark--select_green: var(--theme_dark--bg_green); - --theme_dark--select_blue: var(--theme_dark--bg_blue); - --theme_dark--select_purple: var(--theme_dark--bg_purple); - --theme_dark--select_pink: var(--theme_dark--bg_pink); - --theme_dark--select_red: var(--theme_dark--bg_red); - - --theme_dark--callout_gray: rgba(88, 88, 88, 0.175); - --theme_dark--callout_brown: rgb(51, 51, 51, 0.175); - --theme_dark--callout_orange: rgb(154, 90, 63, 0.175); - --theme_dark--callout_yellow: rgb(181, 138, 70, 0.175); - --theme_dark--callout_green: rgb(101, 121, 83, 0.175); - --theme_dark--callout_blue: rgb(53, 84, 117, 0.175); - --theme_dark--callout_purple: rgb(119, 81, 134, 0.175); - --theme_dark--callout_pink: rgb(142, 75, 99, 0.175); - --theme_dark--callout_red: rgb(140, 61, 61, 0.175); - - --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; -} */ - /* hide sidebar "new page" button */ .notion-dark-theme .notion-sidebar diff --git a/mods/neutral/mod.js b/mods/neutral/mod.js index a695dc9..25ea0e5 100644 --- a/mods/neutral/mod.js +++ b/mods/neutral/mod.js @@ -14,8 +14,4 @@ module.exports = { desc: 'smoother colours and fonts, designed to be more pleasing to the eye.', version: '0.1.4', author: 'arecsu', - fonts: [ - 'https://rsms.me/inter/inter.css', - 'https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap', - ], }; diff --git a/mods/neutral/variables.css b/mods/neutral/variables.css new file mode 100644 index 0000000..1e499d0 --- /dev/null +++ b/mods/neutral/variables.css @@ -0,0 +1,134 @@ +/* + * neutral + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * (c) 2020 Arecsu + * under the MIT license + */ + +@import 'https://rsms.me/inter/inter.css'; +@import 'https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap'; + +:root { + /** dark **/ + + --theme_dark--main: #131313; + --theme_dark--sidebar: #161616; + --theme_dark--overlay: rgba(15, 15, 15, 0.6); + --theme_dark--dragarea: #111111; + --theme_dark--box-shadow: rgba(15, 15, 15, 0.5) 0px 0px 0px 1px, + rgba(15, 15, 15, 0.5) 0px 2px 4px; + + --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_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: 2.2em; + --theme_dark--font_heading2-size: 1.687em; + --theme_dark--font_heading3-size: 1.3em; + --theme_dark--font_label-size: 14px; + --theme_dark--font_body-size: 15px; + --theme_dark--font_body-size_small: 13.5px; + --theme_dark--font_code-size: 0.9em; + --theme_dark--font_sidebar-size: 14px; + + --theme_dark--scrollbar: #232425; + --theme_dark--scrollbar-border: transparent; + --theme_dark--scrollbar_hover: #373838; + + --theme_dark--card: #181818; + --theme_dark--gallery: rgba(105, 105, 105, 0.05); + --theme_dark--select_input: #1d1d1d; + --theme_dark--table-border: rgba(78, 78, 78, 0.7); + --theme_dark--ui-border: var(--theme_dark--table-border); + --theme_dark--interactive_hover: rgb(29, 29, 29); + + --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_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_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_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--select_gray: var(--theme_dark--bg_gray); + --theme_dark--select_brown: var(--theme_dark--bg_brown); + --theme_dark--select_orange: var(--theme_dark--bg_orange); + --theme_dark--select_yellow: var(--theme_dark--bg_yellow); + --theme_dark--select_green: var(--theme_dark--bg_green); + --theme_dark--select_blue: var(--theme_dark--bg_blue); + --theme_dark--select_purple: var(--theme_dark--bg_purple); + --theme_dark--select_pink: var(--theme_dark--bg_pink); + --theme_dark--select_red: var(--theme_dark--bg_red); + + --theme_dark--callout_gray: rgba(88, 88, 88, 0.175); + --theme_dark--callout_brown: rgb(51, 51, 51, 0.175); + --theme_dark--callout_orange: rgb(154, 90, 63, 0.175); + --theme_dark--callout_yellow: rgb(181, 138, 70, 0.175); + --theme_dark--callout_green: rgb(101, 121, 83, 0.175); + --theme_dark--callout_blue: rgb(53, 84, 117, 0.175); + --theme_dark--callout_purple: rgb(119, 81, 134, 0.175); + --theme_dark--callout_pink: rgb(142, 75, 99, 0.175); + --theme_dark--callout_red: rgb(140, 61, 61, 0.175); + + --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); +} diff --git a/mods/pastel-dark/app.css b/mods/pastel-dark/app.css index 1587b7d..e42eb1a 100644 --- a/mods/pastel-dark/app.css +++ b/mods/pastel-dark/app.css @@ -5,117 +5,6 @@ * under the MIT license */ -:root { - --theme_dark--main: #0b0b0b; - --theme_dark--sidebar: #0f0f0f; - --theme_dark--overlay: rgba(15, 15, 15, 0.6); - --theme_dark--dragarea: #0d0d0d; - - --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--scrollbar: #141414; - --theme_dark--scrollbar_hover: #1b1b1b; - - --theme_dark--card: #0f0f0f; - --theme_dark--gallery: rgba(8, 8, 8, 0.05); - --theme_dark--select_input: #0d0d0d; - --theme_dark--table-border: rgba(255, 255, 255, 0.1); - --theme_dark--ui-border: var(--theme_dark--table-border); - --theme_dark--interactive_hover: #1e1e1e5c; - --theme_dark--button_close: #eb5757; - - --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_active-background: var(--theme_dark--primary); - --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(34, 34, 34); - --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--select-text: var(--theme_dark--bg-text); - --theme_dark--select_gray: var(--theme_dark--bg_gray); - --theme_dark--select_brown: var(--theme_dark--bg_brown); - --theme_dark--select_orange: var(--theme_dark--bg_orange); - --theme_dark--select_yellow: var(--theme_dark--bg_yellow); - --theme_dark--select_green: var(--theme_dark--bg_green); - --theme_dark--select_blue: var(--theme_dark--bg_blue); - --theme_dark--select_purple: var(--theme_dark--bg_purple); - --theme_dark--select_pink: var(--theme_dark--bg_pink); - --theme_dark--select_red: var(--theme_dark--bg_red); - - --theme_dark--callout-text: var(--theme_dark--line-text); - --theme_dark--callout_gray: var(--theme_dark--line_gray); - --theme_dark--callout_brown: var(--theme_dark--line_brown); - --theme_dark--callout_orange: var(--theme_dark--line_orange); - --theme_dark--callout_yellow: var(--theme_dark--line_yellow); - --theme_dark--callout_green: var(--theme_dark--line_green); - --theme_dark--callout_blue: var(--theme_dark--line_blue); - --theme_dark--callout_purple: var(--theme_dark--line_purple); - --theme_dark--callout_pink: var(--theme_dark--line_pink); - --theme_dark--callout_red: var(--theme_dark--line_red); - - --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'] { diff --git a/mods/pastel-dark/mod.js b/mods/pastel-dark/mod.js index 71d4319..ea20581 100644 --- a/mods/pastel-dark/mod.js +++ b/mods/pastel-dark/mod.js @@ -18,5 +18,4 @@ module.exports = { link: 'https://www.reddit.com/user/zenith_illinois/', avatar: 'https://www.redditstatic.com/avatars/avatar_default_18_46A508.png', }, - fonts: ['https://rsms.me/inter/inter.css'], }; diff --git a/mods/pastel-dark/variables.css b/mods/pastel-dark/variables.css new file mode 100644 index 0000000..7166b7c --- /dev/null +++ b/mods/pastel-dark/variables.css @@ -0,0 +1,119 @@ +/* + * pastel dark + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * (c) 2020 u/zenith_illinois + * under the MIT license + */ + +@import '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--font_sans: 'Inter', -apple-system, BlinkMacSystemFont, + 'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif, + 'Segoe UI Emoji', 'Segoe UI Symbol'; + + --theme_dark--scrollbar: #141414; + --theme_dark--scrollbar_hover: #1b1b1b; + + --theme_dark--card: #0f0f0f; + --theme_dark--gallery: rgba(8, 8, 8, 0.05); + --theme_dark--select_input: #0d0d0d; + --theme_dark--table-border: rgba(255, 255, 255, 0.1); + --theme_dark--ui-border: var(--theme_dark--table-border); + --theme_dark--interactive_hover: #1e1e1e5c; + --theme_dark--button_close: #eb5757; + + --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_active-background: var(--theme_dark--primary); + --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(34, 34, 34); + --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--select-text: var(--theme_dark--bg-text); + --theme_dark--select_gray: var(--theme_dark--bg_gray); + --theme_dark--select_brown: var(--theme_dark--bg_brown); + --theme_dark--select_orange: var(--theme_dark--bg_orange); + --theme_dark--select_yellow: var(--theme_dark--bg_yellow); + --theme_dark--select_green: var(--theme_dark--bg_green); + --theme_dark--select_blue: var(--theme_dark--bg_blue); + --theme_dark--select_purple: var(--theme_dark--bg_purple); + --theme_dark--select_pink: var(--theme_dark--bg_pink); + --theme_dark--select_red: var(--theme_dark--bg_red); + + --theme_dark--callout-text: var(--theme_dark--line-text); + --theme_dark--callout_gray: var(--theme_dark--line_gray); + --theme_dark--callout_brown: var(--theme_dark--line_brown); + --theme_dark--callout_orange: var(--theme_dark--line_orange); + --theme_dark--callout_yellow: var(--theme_dark--line_yellow); + --theme_dark--callout_green: var(--theme_dark--line_green); + --theme_dark--callout_blue: var(--theme_dark--line_blue); + --theme_dark--callout_purple: var(--theme_dark--line_purple); + --theme_dark--callout_pink: var(--theme_dark--line_pink); + --theme_dark--callout_red: var(--theme_dark--line_red); + + --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); +} diff --git a/mods/property-layout/mod.js b/mods/property-layout/mod.js index 5b5426a..9509a50 100644 --- a/mods/property-layout/mod.js +++ b/mods/property-layout/mod.js @@ -22,14 +22,14 @@ module.exports = { if (document.readyState !== 'complete') return false; let queue = []; const observer = new MutationObserver((list, observer) => { - if (!queue.length) requestAnimationFrame(() => process(queue)); + if (!queue.length) requestAnimationFrame(() => handle(queue)); queue.push(...list); }); observer.observe(document.body, { childList: true, subtree: true, }); - function process(list) { + function handle(list) { queue = []; let properties = document.querySelector( '.notion-scroller.vertical [style*="env(safe-area-inset-left)"] > [style="width: 100%; font-size: 14px;"]' diff --git a/mods/right-to-left/mod.js b/mods/right-to-left/mod.js index 3f1fb80..917e127 100644 --- a/mods/right-to-left/mod.js +++ b/mods/right-to-left/mod.js @@ -20,7 +20,7 @@ module.exports = { if (document.readyState !== 'complete') return false; let queue = []; const DOCUMENT_OBSERVER = new MutationObserver((list, observer) => { - if (!queue.length) requestIdleCallback(() => process(queue)); + if (!queue.length) requestIdleCallback(() => handle(queue)); queue.push(...list); }), PAGE_OBSERVER = new MutationObserver(autoAlignPageContent); @@ -28,7 +28,7 @@ module.exports = { childList: true, subtree: true, }); - function process(list) { + function handle(list) { queue = []; for (let { addedNodes } of list) { if ( diff --git a/mods/scroll-to-top/mod.js b/mods/scroll-to-top/mod.js index 66c82f4..03d1afe 100644 --- a/mods/scroll-to-top/mod.js +++ b/mods/scroll-to-top/mod.js @@ -82,7 +82,7 @@ module.exports = { let top = store().top || 0; const observer = new MutationObserver((list, observer) => { - if (!queue.length) requestAnimationFrame(() => process(queue)); + if (!queue.length) requestAnimationFrame(() => handle(queue)); queue.push(...list); }); observer.observe(document.body, { @@ -90,7 +90,7 @@ module.exports = { subtree: true, }); - function process(list) { + function handle(list) { queue = []; setScrollDistance(); diff --git a/mods/topbar-icons/mod.js b/mods/topbar-icons/mod.js index 237129d..86b2baf 100644 --- a/mods/topbar-icons/mod.js +++ b/mods/topbar-icons/mod.js @@ -68,7 +68,7 @@ module.exports = { let queue = []; const observer = new MutationObserver((list, observer) => { - if (!queue.length) requestAnimationFrame(() => process(queue)); + if (!queue.length) requestAnimationFrame(() => handle(queue)); queue.push(...list); }); observer.observe(document.body, { @@ -76,7 +76,7 @@ module.exports = { subtree: true, }); - function process(list) { + function handle(list) { queue = []; for (let { addedNodes } of list) { if ( diff --git a/mods/tweaks/app.css b/mods/tweaks/app.css index 15013eb..811a75d 100644 --- a/mods/tweaks/app.css +++ b/mods/tweaks/app.css @@ -55,11 +55,15 @@ } [data-tweaks*='[indentation_lines'] -div.notion-selectable.notion-bulleted_list-block > div > div:last-child { +div.notion-selectable.notion-bulleted_list-block > div > div:last-child, +[data-tweaks*='[indentation_lines'] +div.notion-selectable.notion-numbered_list-block > div > div:last-child { position: relative; } [data-tweaks*='[indentation_lines'] -div.notion-selectable.notion-bulleted_list-block > div > div:last-child::before { +div.notion-selectable.notion-bulleted_list-block > div > div:last-child::before, +[data-tweaks*='[indentation_lines'] +div.notion-selectable.notion-numbered_list-block > div > div:last-child::before { content: ""; position: absolute; height: calc(100% - 2em); @@ -68,15 +72,21 @@ div.notion-selectable.notion-bulleted_list-block > div > div:last-child::before border-left: 1px solid; } [data-tweaks*='[indentation_lines_dashed]'] -div.notion-selectable.notion-bulleted_list-block > div > div:last-child::before { +div.notion-selectable.notion-bulleted_list-block > div > div:last-child::before, +[data-tweaks*='[indentation_lines_dashed]'] +div.notion-selectable.notion-numbered_list-block > div > div:last-child::before { border-left-style: dashed; } [data-tweaks*='[indentation_lines_dotted]'] -div.notion-selectable.notion-bulleted_list-block > div > div:last-child::before { +div.notion-selectable.notion-bulleted_list-block > div > div:last-child::before, +[data-tweaks*='[indentation_lines_dotted]'] +div.notion-selectable.notion-numbered_list-block > div > div:last-child::before { border-left-style: dotted; } [data-tweaks*='[indentation_lines_soft]'] -div.notion-selectable.notion-bulleted_list-block > div > div:last-child::before { +div.notion-selectable.notion-bulleted_list-block > div > div:last-child::before, +[data-tweaks*='[indentation_lines_soft]'] +div.notion-selectable.notion-numbered_list-block > div > div:last-child::before { opacity: 0.25; } diff --git a/mods/tweaks/mod.js b/mods/tweaks/mod.js index c514e56..04c0912 100644 --- a/mods/tweaks/mod.js +++ b/mods/tweaks/mod.js @@ -70,16 +70,16 @@ module.exports = { key: 'condensed_bullets', label: 'condense bullet points', desc: - "makes bullet point blocks closer together and have tighter line spacing", + 'makes bullet point blocks closer together and have tighter line spacing', type: 'toggle', value: false, }, { key: 'indentation_lines', - label: 'indentation lines for bullets', + label: 'indentation lines for lists', desc: - "adds vertical indentation or relationship lines to make bullet trees\ - easier to follow", + 'adds vertical indentation or relationship lines to make list trees\ + easier to follow', type: 'select', value: ['none', 'solid', 'dashed', 'dotted', 'soft'], }, @@ -87,10 +87,10 @@ module.exports = { key: 'scroll_db_toolbars', label: 'scroll database toolbars', desc: - "allows scrolling database toolbars horizontally if\ - part of the toolbar is hidden (hold shift while scrolling)", + 'allows scrolling database toolbars horizontally if\ + part of the toolbar is hidden (hold shift while scrolling)', type: 'toggle', - value: false, + value: true, }, ], hacks: { @@ -104,7 +104,7 @@ module.exports = { 'spaced_lines', 'hide_help', 'condensed_bullets', - 'scroll_db_toolbars' + 'scroll_db_toolbars', ] .filter((tweak) => store()[tweak]) .map((tweak) => `[${tweak}]`) @@ -124,7 +124,9 @@ module.exports = { window.addEventListener('resize', addResponsiveBreakpoint); addResponsiveBreakpoint(); if (store().indentation_lines !== 'none') { - document.body.dataset.tweaks += `[indentation_lines_${store().indentation_lines}]` + document.body.dataset.tweaks += `[indentation_lines_${ + store().indentation_lines + }]`; } }); }, diff --git a/mods/weekly-view/mod.js b/mods/weekly-view/mod.js index d21abbd..2b2220d 100644 --- a/mods/weekly-view/mod.js +++ b/mods/weekly-view/mod.js @@ -21,13 +21,13 @@ module.exports = { const notion_elem = document.querySelector('.notion-frame'); if (!notion_elem) return; clearInterval(attempt_interval); - process([{ target: notion_elem }]); - const observer = new MutationObserver(process); + handle([{ target: notion_elem }]); + const observer = new MutationObserver(handle); observer.observe(notion_elem, { childList: true, subtree: true, }); - function process(list, observer) { + function handle(list, observer) { document .querySelectorAll('.notion-collection-view-select') .forEach((collection_view) => { diff --git a/pkg/loader.js b/pkg/loader.js index da72bfd..42b803b 100644 --- a/pkg/loader.js +++ b/pkg/loader.js @@ -65,18 +65,19 @@ module.exports = function (__file, __exports) { for (let mod of modules) { if ( (mod.alwaysActive || - store('mods', { [mod.id]: { enabled: false } })[mod.id].enabled) && - fs.pathExistsSync( - path.resolve(`${__dirname}/../mods/${mod.dir}/app.css`) - ) + store('mods', { [mod.id]: { enabled: false } })[mod.id].enabled) ) { - for (let rules of [ - `enhancement://${mod.dir}/app.css`, - ...(mod.fonts || []), - ]) { - document.head.appendChild( - createElement(``) - ); + const fileExists = (file) => fs.pathExistsSync( + path.resolve(file) + ) + for (let sheet of ['app', 'variables']) { + if (fileExists(`${__dirname}/../mods/${mod.dir}/${sheet}.css`)) { + document.head.appendChild( + createElement( + `` + ) + ); + } } } }