diff --git a/CHANGELOG.md b/CHANGELOG.md index 6299e0a..3ac3e0b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,12 +5,52 @@ - [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) +- [advanced math editor](https://github.com/Manueloccorso/NotionMathEditor_BrowserExtension) -### v0.8.5 (wip) +### v0.9.0 (wip) + +a feature and cleanup update. + +- improved: halved the number of css rules used -> much better performance. +- improved: font imports must be define in the `mod.js` so that they can also be used in + the enhancements menu. +- improved: tiling window-manager support (can hide titlebars entirely without dragarea/buttons). +- improved: extensions menu search is now case insensitive and includes options, inputs and versions. + the search box can also for focused with `CMD/CTRL+F`. +- improved: extensions menu filters shown either a ✓ or × to help understand the current state. +- bugfix: enhancer settings should no longer reset on update (though this will not have + effect until the release after this one). +- bugfix: blue select tags are no longer purple. +- bugfix: page titles now respond to small-text mode. +- bugfix: weekly calendar view height is now sized correctly according to its contents. +- bugfix: made the open enhancements menu hotkey configurable and changed the default to `ALT+E`. + to remove conflict with the inline code highlight shortcut. +- bugfix: update property-layout to match notion changes again. +- bugfix: updated some of the tweak styling to match notion changes. +- bugfix: block-level text colours are now changed properly. +- themes: "littlepig" (light + dark) = monospaced themes using emojis and colourful text. +- extension: "font chooser" = customize fonts. for each option, type in the name of the font you would like to use, + or leave it blank to not change anything. +- extension: "always on top" = add an arrow/button to show the notion window on top of other windows + even if it's not focused. +- extension: "calendar scroll" = add a button to scroll down to the current week for you. + +// todo + +- improved: added individual text-colour rules for different background colours. +- improved: added variables for callout colouring. +- bugfix: switch to a different right-to-left extension because it wasn't working right + with bullet points and stuff. + +notion-deb-builder has been discovered to not generate an app.asar and so is no longer supported. + +### v0.8.5 (2020-08-29) - bugfix: separate text highlight and select tag variables. - bugfix: bypass CSP for the `enhancement://` protocol - was failing on some platforms? +> 📥 `npm i -g notion-enhancer@0.8.5` + ### v0.8.4 (2020-08-29) - bugfix: property-layout now works consistently with or without a banner. @@ -35,7 +75,7 @@ to use `./bin.js` instead of `notion-enhancer` a clarity and stability update. -- improved: more informative error messages. +- improved: more informative cli error messages (original ones can be accessed with the `-d/--dev` flag). - bugfix: gallery variable didn't apply on fullpage. - bugfix: date picker hid current date number. - bugfix: small-text pages should now work as expected. diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md index ec05bfb..95f0667 100644 --- a/DOCUMENTATION.md +++ b/DOCUMENTATION.md @@ -54,6 +54,7 @@ module.exports = { type: String in ['toggle', 'select', 'input', 'file'], value: Boolean or Array or String or Number or null }>, + fonts: Array of font_urls, hacks?: { [k: 'insert-point' (e.g. 'main/createWindow.js')]: function ( store, // used for configuration and persisting of data (explanation below). @@ -63,16 +64,17 @@ 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\_ | +| fonts | **optional:** a list of any font imports - should be `https://` or [`enhancement://`](#the-enhancement-protocol) urls | _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. @@ -174,6 +176,9 @@ the full/up-to-date list of variables and their default values can be found in t 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. +**want to import an external font or import an included font file? do that in the `mod.js` file, otherwise it** +**won't be used for the enhancements menu.** + ### using variables variables should be used without specifying which mode they are relevant to. for example: diff --git a/README.md b/README.md index dd5b909..b61fd9f 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,6 @@ for support, join the [discord server](https://discord.gg/sFWPXtA). - 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/). (it can also be run from the wsl to apply enhancements to the windows app.) @@ -30,7 +29,7 @@ a chrome extension may be coming soon for web client support. ## installation -> coming from <= v0.7.0? things are a bit different - have a read of [the update guide](UPDATING.md)\*\* +> coming from <= v0.7.0? things are a bit different - have a read of [the update guide](UPDATING.md) > before following these instructions. during installation/removal, make sure no notion processes are running! (check your task manager.) @@ -96,7 +95,7 @@ team to take to heart for future improvements." ## features once applied, modules can be configured via the graphical menu, which is opened from -the tray/menubar icon or with `CMD/CTRL+E`. +the tray/menubar icon or with `ALT+E`. ![](https://user-images.githubusercontent.com/16874139/91446210-84ee6b00-e8ba-11ea-9f40-187a150e4a82.png) diff --git a/TWEAKS.md b/TWEAKS.md index 4161269..ffd00b2 100644 --- a/TWEAKS.md +++ b/TWEAKS.md @@ -33,6 +33,7 @@ if you are attempting to customise the web client, the css previously used for t ### hide discussions (the comment threads at the top of each page) ```css +[style*='env(safe-area-inset-left)'] [style*='width: 100%; height: 1px;'], .notion-page-view-discussion { display: none !important; } @@ -40,11 +41,27 @@ if you are attempting to customise the web client, the css previously used for t +### hide backlinks + +note: this only hides the trigger. if you've already got backlinks shown, +then use the 3 dots up in the top-right corner to remove them. + +```css +.notion-page-details-controls { + display: none !important; +} +``` + + + ### hide the '+ new' gallery button ```css .notion-gallery-view .notion-selectable.notion-collection_view-block + > [role='button'], +.notion-gallery-view + .notion-selectable.notion-collection_view_page-block > [role='button'] { display: none !important; } diff --git a/UPDATING.md b/UPDATING.md index d27e589..c0c9831 100644 --- a/UPDATING.md +++ b/UPDATING.md @@ -46,7 +46,7 @@ page and the [css theming documentation](DOCUMENTATION.md#variable-theming). "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). +tray or with `ALT+E` (while the notion app is focused). ## installing diff --git a/bin.js b/bin.js index 06529c8..aab013f 100644 --- a/bin.js +++ b/bin.js @@ -67,4 +67,5 @@ cli.showVersionOnExit = true; cli.parse(); -if (!cli.matchedCommand && !helpCalled) cli.outputHelp(); +if (!cli.matchedCommand && !helpCalled && !cli.options.version) + cli.outputHelp(); diff --git a/mods/alwaysontop/mod.js b/mods/alwaysontop/mod.js new file mode 100644 index 0000000..6972b63 --- /dev/null +++ b/mods/alwaysontop/mod.js @@ -0,0 +1,20 @@ +/* + * always on top + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * under the MIT license + */ + +'use strict'; + +// this is actually just a pseudo mod to "separate" the button +// from the core module, but the core still handles actually +// making it work. +module.exports = { + id: '72886371-dada-49a7-9afc-9f275ecf29d3', + tags: ['extension'], + name: 'always on top', + desc: + "add an arrow/button to show the notion window on top of other windows even if it's not focused.", + version: '0.1.1', + author: 'dragonwocky', +}; diff --git a/mods/calendar-scroll/mod.js b/mods/calendar-scroll/mod.js new file mode 100644 index 0000000..44cf64f --- /dev/null +++ b/mods/calendar-scroll/mod.js @@ -0,0 +1,79 @@ +/* + * calendar scroll + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * under the MIT license + */ + +'use strict'; + +const helpers = require('../../pkg/helpers.js'); + +module.exports = { + id: 'b1c7db33-dfee-489a-a76c-0dd66f7ed29a', + tags: ['extension'], + name: 'calendar scroll', + desc: + 'add a button to scroll down to the current week of a calendar for you.', + 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-frame'); + if (!notion_elem) return; + clearInterval(attempt_interval); + + const button = helpers.createElement( + '' + ); + button.addEventListener('click', (event) => { + const collection_view = document.querySelector( + '.notion-collection-view-select' + ); + if (!collection_view) return; + const day = [ + ...collection_view.parentElement.parentElement.parentElement.parentElement.getElementsByClassName( + 'notion-calendar-view-day' + ), + ].find((day) => day.style.background); + if (!day) return; + const scroller = document.querySelector( + '.notion-frame .notion-scroller' + ); + scroller.scroll({ + top: day.offsetParent.offsetParent.offsetTop + 70, + }); + setTimeout( + () => + scroller.scroll({ + top: day.offsetParent.offsetParent.offsetTop + 70, + }), + 100 + ); + }); + + process(); + const observer = new MutationObserver(process); + observer.observe(notion_elem, { + childList: true, + subtree: true, + }); + function process(list, observer) { + if (document.querySelector('#calendar-scroll-to-week')) return; + const arrow = document.querySelector( + '.notion-selectable.notion-collection_view_page-block .chevronLeft' + ); + if (arrow) + arrow.parentElement.parentElement.insertBefore( + button, + arrow.parentElement + ); + } + } + }); + }, + }, +}; diff --git a/mods/calendar-scroll/styles.css b/mods/calendar-scroll/styles.css new file mode 100644 index 0000000..ed41f12 --- /dev/null +++ b/mods/calendar-scroll/styles.css @@ -0,0 +1,20 @@ +/* + * calendar scroll + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * under the MIT license + */ + +#calendar-scroll-to-week { + background: var(--theme--interactive_hover); + border: 1px solid transparent; + font-size: var(--theme--font_label-size); + color: var(--theme--text); + height: 24px; + border-radius: 3px; + line-height: 1.2; + padding: 0 0.5em; +} +#calendar-scroll-to-week:hover { + background: transparent; + border: 1px solid var(--theme--interactive_hover); +} diff --git a/mods/core/buttons.js b/mods/core/buttons.js index f664432..376f1b4 100644 --- a/mods/core/buttons.js +++ b/mods/core/buttons.js @@ -7,16 +7,19 @@ 'use strict'; module.exports = (store) => { - const electron = require('electron'), + const helpers = require('../../pkg/helpers.js'), path = require('path'), fs = require('fs-extra'), browser = require('electron').remote.getCurrentWindow(), is_mac = process.platform === 'darwin', buttons = { - element: document.createElement('div'), + element: helpers.createElement('
'), insert: [ - 'alwaysontop', - ...(store().frameless && !is_mac + ...((store('mods')['72886371-dada-49a7-9afc-9f275ecf29d3'] || {}) + .enabled + ? ['alwaysontop'] + : []), + ...(store().frameless && !store().tiling_mode && !is_mac ? ['minimize', 'maximize', 'close'] : []), ], @@ -77,7 +80,6 @@ module.exports = (store) => { }; (async () => { - buttons.element.className = 'window-buttons-area'; for (let btn of buttons.insert) { buttons.element.innerHTML += `')); + .appendChild( + helpers.createElement('') + ); document.querySelectorAll('#popup .close-modal').forEach((el) => el.addEventListener('click', (event) => { $popup.classList.remove('visible'); @@ -161,7 +172,7 @@ window['__start'] = async () => { ); // search - const search_query = { + const search_filters = { enabled: true, disabled: true, tags: new Set( @@ -171,19 +182,28 @@ window['__start'] = async () => { .sort() ), }; + function innerText(elem) { + let text = ''; + for (let node of elem.childNodes) { + if (node.nodeType === 3) text += node.textContent; + if (node.nodeType === 1) + text += ['text', 'number'].includes(node.type) + ? node.value + : innerText(node); + } + return text; + } 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)) || + (mod.elem.classList.contains('enabled') && !search_filters.enabled) || + (mod.elem.classList.contains('disabled') && !search_filters.disabled) || + !mod.tags.some((tag) => search_filters.tags.has(tag)) || ($search_input.value && - !( - mod.name + - mod.tags.map((tag) => `#${tag}`).join(' ') + - mod.desc - ).includes($search_input.value)) + !innerText(mod.elem) + .toLowerCase() + .includes($search_input.value.toLowerCase())) ) return (mod.elem.style.display = 'none'); mod.elem.style.display = 'block'; @@ -196,7 +216,7 @@ window['__start'] = async () => { throw Error(' @ createTag: no tagname specified'); if (!onclick) throw Error(' @ createTag: no action specified'); - const el = createElement( + const el = helpers.createElement( `${tagname}` @@ -210,17 +230,17 @@ window['__start'] = async () => { } createTag( 'enabled', - (state) => [(search_query.enabled = state), search()] + (state) => [(search_filters.enabled = state), search()] // 'var(--theme--bg_green)' ); createTag( 'disabled', - (state) => [(search_query.disabled = state), search()] + (state) => [(search_filters.disabled = state), search()] // 'var(--theme--bg_red)' ); - for (let tag of search_query.tags) + for (let tag of search_filters.tags) createTag(`#${tag}`, (state) => [ - state ? search_query.tags.add(tag) : search_query.tags.delete(tag), + state ? search_filters.tags.add(tag) : search_filters.tags.delete(tag), search(), ]); @@ -346,7 +366,7 @@ window['__start'] = async () => { `; } - $opt = createElement(`

${$opt}

`); + $opt = helpers.createElement(`

${$opt}

`); if (opt.type === 'color') { $opt .querySelector(`#${opt.type}_${id}--${opt.key}`) @@ -378,6 +398,14 @@ window['__start'] = async () => { ? 1 : a.name.localeCompare(b.name) )) { + for (let fonts of mod.fonts || []) { + document + .querySelector('head') + .appendChild( + helpers.createElement(``) + ); + } + const enabled = store('mods', { [mod.id]: { enabled: false } })[mod.id] .enabled, author = @@ -388,7 +416,7 @@ window['__start'] = async () => { link: `https://github.com/${mod.author}`, avatar: `https://github.com/${mod.author}.png`, }; - mod.elem = createElement(` + mod.elem = helpers.createElement(`
@@ -454,6 +482,7 @@ window['__start'] = async () => { $opt .querySelector(`#${opt.type}_${mod.id}--${opt.key}`) .addEventListener('change', (event) => { + modified(); if (opt.type === 'toggle') { store(mod.id)[opt.key] = event.target.checked; } else if (opt.type === 'file') { @@ -465,9 +494,8 @@ window['__start'] = async () => { } else store(mod.id)[opt.key] = typeof opt.value === 'number' - ? Number(event.target.value) + ? +event.target.value : event.target.value; - modified(); }); } $options.appendChild($opt); diff --git a/mods/core/mod.js b/mods/core/mod.js index 1f56beb..2294d0a 100644 --- a/mods/core/mod.js +++ b/mods/core/mod.js @@ -44,6 +44,12 @@ module.exports = { type: 'input', value: 15, }, + { + key: 'tiling_mode', + label: 'tiling window manager mode', + type: 'toggle', + value: false, + }, { key: 'smooth_scrollbars', label: 'integrated scrollbars', @@ -56,6 +62,12 @@ module.exports = { type: 'input', value: 'CommandOrControl+Shift+A', }, + { + key: 'menu_toggle', + label: 'open enhancements menu hotkey:', + type: 'input', + value: 'Alt+E', + }, ], hacks: { 'main/main.js': require('./tray.js'), diff --git a/mods/core/render.js b/mods/core/render.js index a6c7d58..9b17f03 100644 --- a/mods/core/render.js +++ b/mods/core/render.js @@ -16,16 +16,20 @@ module.exports = (store, __exports) => { ), 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]};` - ); - }); + if (store().tiling_mode) { + dragarea.style.display = 'none'; + } else { + 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]};` + ); + }); + } }; }; diff --git a/mods/core/styles.css b/mods/core/styles.css index 968415c..da69ff5 100644 --- a/mods/core/styles.css +++ b/mods/core/styles.css @@ -4,9 +4,7 @@ * under the MIT license */ -@import './css/localised.css'; -@import './css/dark.css'; -@import './css/light.css'; -@import './css/shared.css'; +@import './css/theme.css'; +@import './css/variables.css'; @import './css/scrollbars.css'; @import './css/titlebar.css'; diff --git a/mods/core/tray.js b/mods/core/tray.js index 031dd85..0c004e9 100644 --- a/mods/core/tray.js +++ b/mods/core/tray.js @@ -29,16 +29,17 @@ module.exports = (store, __exports) => { }) ); - electron.ipcMain.on('enhancer:set-menu-theme', (event, arg) => { + electron.ipcMain.on('enhancer:set-theme-vars', (event, arg) => { if (!enhancer_menu) return; - enhancer_menu.webContents.send('enhancer:set-menu-theme', arg); + enhancer_menu.webContents.send('enhancer:set-theme-vars', arg); }); - electron.ipcMain.on('enhancer:get-menu-theme', (event, arg) => { + electron.ipcMain.on('enhancer:get-theme-vars', (event, arg) => { electron.webContents .getAllWebContents() - .forEach((webContents) => webContents.send('enhancer:get-menu-theme')); + .forEach((webContents) => + webContents.send('enhancer:get-theme-vars', arg) + ); }); - electron.ipcMain.on('enhancer:open-extension-menu', openExtensionMenu); function calculateWindowPos(width, height) { const screen = electron.screen.getDisplayNearestPoint({ @@ -155,7 +156,7 @@ module.exports = (store, __exports) => { { type: 'normal', label: 'Enhancements', - accelerator: 'CommandOrControl+E', + accelerator: store().menu_toggle, click: openExtensionMenu, }, { @@ -191,6 +192,17 @@ module.exports = (store, __exports) => { tray.setContextMenu(contextMenu); tray.setToolTip('Notion'); + electron.globalShortcut.register(store().menu_toggle, () => { + if ( + electron.BrowserWindow.getAllWindows() + .filter((win) => win.getTitle() !== 'notion-enhancer menu') + .some((win) => win.isFocused()) + ) { + openExtensionMenu(); + } else if (enhancer_menu && enhancer_menu.isFocused()) + enhancer_menu.close(); + }); + function showWindows() { const windows = electron.BrowserWindow.getAllWindows(); if (is_mac) electron.app.show(); diff --git a/mods/custom-inserts/mod.js b/mods/custom-inserts/mod.js index 0879d36..59c0ba0 100644 --- a/mods/custom-inserts/mod.js +++ b/mods/custom-inserts/mod.js @@ -6,12 +6,14 @@ 'use strict'; +const helpers = require('../../pkg/helpers.js'); + 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', + version: '0.1.2', author: 'dragonwocky', options: [ { @@ -34,10 +36,15 @@ module.exports = { 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); + document + .querySelector('head') + .appendChild( + helpers.createElement( + `` + ) + ); } catch (err) { console.warn(' invalid css file... unsetting.'); store().css = ''; diff --git a/mods/font-chooser/mod.js b/mods/font-chooser/mod.js index 60b5cec..03cd2ca 100644 --- a/mods/font-chooser/mod.js +++ b/mods/font-chooser/mod.js @@ -1,95 +1,59 @@ /* * font chooser * (c) 2020 torchatlas (https://bit.ly/torchatlas) + * (c) 2020 dragonwocky (https://dragonwocky.me/) * under the MIT license */ 'use strict'; module.exports = { - id: 'e0d8d148-45e7-4d79-8313-e7b2ad8abe16', - tags: ['extension'], - name: 'font chooser', - desc: 'customize fonts. for each option, type in the name of the font you would like to use, or leave it blank to not change anything.', - version: '0.1.0', - author: 'torchatlas', - options: [ - { - key: 'sansSerif', - label: 'Sans Serif and UI', - type: 'input', - value: '', - }, - { - key: 'serif', - label: 'Serif', - type: 'input', - value: '' - }, - { - key: 'mono', - label: 'Monospace', - type: 'input', - value: '' - }, - { - key: 'code', - label: 'Code', - type: 'input', - value: '' - } - ], - hacks: { - 'renderer/preload.js'(store, __exports) { - document.addEventListener('readystatechange', (event) => { - - if (document.readyState !== 'complete') return false; - - if (store().sansSerif != '') { - document.documentElement.style.setProperty( - '--theme_dark--font_sans', - store().sansSerif - ); - document.documentElement.style.setProperty( - '--theme_light--font_sans', - store().sansSerif - ); - } - - if (store().serif != '') { - document.documentElement.style.setProperty( - '--theme_dark--font_serif', - store().serif - ); - document.documentElement.style.setProperty( - '--theme_light--font_serif', - store().serif - ); - } - - if (store().mono != '') { - document.documentElement.style.setProperty( - '--theme_dark--font_mono', - store().mono - ); - document.documentElement.style.setProperty( - '--theme_light--font_mono', - store().mono - ); - } - - if (store().code != '') { - document.documentElement.style.setProperty( - '--theme_dark--font_code', - store().code - ); - document.documentElement.style.setProperty( - '--theme_light--font_code', - store().code - ); - } - - }); - } - } -} \ No newline at end of file + id: 'e0d8d148-45e7-4d79-8313-e7b2ad8abe16', + tags: ['extension'], + name: 'font chooser', + desc: + 'customize fonts. for each option, type in the name of the font you would like to use, or leave it blank to not change anything.', + version: '0.1.1', + author: 'torchatlas', + options: [ + { + key: 'sans', + label: 'sans-serif (inc. ui):', + type: 'input', + value: '', + }, + { + key: 'serif', + label: 'serif:', + type: 'input', + value: '', + }, + { + key: 'mono', + label: 'monospace:', + type: 'input', + value: '', + }, + { + key: 'code', + label: 'code:', + type: 'input', + value: '', + }, + ], + hacks: { + 'renderer/preload.js'(store, __exports) { + const attempt_interval = setInterval(enhance, 500); + async function enhance() { + if (!document.querySelector('.notion-app-inner')) return; + clearInterval(attempt_interval); + for (let style of ['sans', 'serif', 'mono', 'code']) { + if (!store()[style]) return; + document + .querySelector('.notion-app-inner') + .style.setProperty(`--theme--font_${style}`, store()[style]); + } + } + }, + }, +}; diff --git a/mods/gameish/mod.js b/mods/gameish/mod.js index 405aabe..66a5bf6 100644 --- a/mods/gameish/mod.js +++ b/mods/gameish/mod.js @@ -12,11 +12,14 @@ module.exports = { tags: ['theme', 'dark'], name: 'gameish', desc: 'a purple, "gamer-styled" theme with a blocky-font.', - version: '0.1.2', + version: '0.1.3', author: { name: 'LVL100ShrekCultist', link: 'https://www.reddit.com/user/LVL100ShrekCultist/', 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/styles.css b/mods/gameish/styles.css index b0c914b..62500b1 100644 --- a/mods/gameish/styles.css +++ b/mods/gameish/styles.css @@ -5,8 +5,6 @@ * 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; diff --git a/mods/littilepig-dark/mod.js b/mods/littilepig-dark/mod.js new file mode 100644 index 0000000..a655447 --- /dev/null +++ b/mods/littilepig-dark/mod.js @@ -0,0 +1,23 @@ +/* + * littlepig + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * (c) 2020 Lizishan + * under the MIT license + */ + +'use strict'; + +module.exports = { + id: 'ad923617-e76e-418e-9f23-490738a32299', + tags: ['theme', 'dark'], + name: 'littlepig dark', + desc: 'a purple monospaced theme using emojis and colourful text.', + version: '0.1.1', + author: { + name: 'Lizishan', + link: 'https://www.reddit.com/user/Lizishan/', + 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/styles.css b/mods/littilepig-dark/styles.css new file mode 100644 index 0000000..fbc0efe --- /dev/null +++ b/mods/littilepig-dark/styles.css @@ -0,0 +1,625 @@ +/* + * littlepig + * (c) 2020 dragonwocky + * (c) 2020 Lizishan + * 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_mono: 'JetBrains Mono', iawriter-mono, Nitti, Menlo, + Courier, monospace; + --theme_dark--font_code: 'JetBrains Mono', SFMono-Regular, Consolas, + 'Liberation Mono', Menlo, Courier, monospace; + + --theme_dark--scrollbar: #221f29; + /* --theme_dark--scrollbar-border: transparent; */ + --theme_dark--scrollbar_hover: #312d3c; + + --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: 17px; + --theme_dark--font_code-size: 16px; + --theme_dark--font_sidebar-size: 14px; + + /* --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: #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--danger_text: rgb(235, 87, 87); + --theme_dark--danger_border: rgba(235, 87, 87, 0.5); + + --theme_dark--text: rgba(200, 200, 200, 0.8); + --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(177, 144, 131); + --theme_dark--text_orange: rgb(255, 163, 68); + --theme_dark--text_yellow: rgb(255, 220, 73); + --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_pink: rgb(226, 85, 161); + --theme_dark--text_red: rgb(240, 52, 38); + + /* 文本背景色 */ + --theme_dark--bg_gray: rgb(234, 234, 234); + --theme_dark--bg_gray_text: rgb(17, 17, 17); + + --theme_dark--bg_brown: rgb(130, 118, 111); + --theme_dark--bg_brown_text: rgb(85, 35, 1); + + --theme_dark--bg_orange: rgb(254, 214, 155); + --theme_dark--bg_yellow_text: rgb(199, 110, 0); + + --theme_dark--bg_yellow: rgb(235, 227, 178); + --theme_dark--bg_yellow_text: rgb(138, 118, 2); + + --theme_dark--bg_green: rgb(212, 237, 218); + --theme_dark--bg_green_text: rgb(21, 87, 36); + + --theme_dark--bg_blue: rgb(204, 229, 255); + --theme_dark--bg_blue_text: rgb(0, 64, 133); + + --theme_dark--bg_purple: rgb(199, 178, 230); + --theme_dark--bg_purple_text: rgb(90, 49, 148); + + --theme_dark--bg_pink: rgb(255, 206, 228); + --theme_dark--bg_pink_text: rgb(255, 0, 127); + + --theme_dark--bg_red: rgb(248, 215, 218); + --theme_dark--bg_red_text: rgb(138, 0, 10); + + --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--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); + + --theme_dark--code_inline-text: #d9cbec; + --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: rgb(179, 146, 240); + --theme_dark--code_keyword: hsl(350, 100%, 69%); + --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(159, 69%, 39%); + --theme_dark--code_string: hsl(75, 95%, 48%); + --theme_dark--code_attr-value: hsl(350, 40%, 70%); + + /* 标题色 */ + --theme_dark--h1_text: #c264fe; + --theme_dark--h2_text: #e2bafe; + --theme_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--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); + + /* callout 颜色 */ + + --theme_dark--callout_bg_gray: #e2e3e5; + --theme_dark--callout_text_gray: #383d41; + + --theme_dark--callout_bg_brown: rgb(130, 118, 111); + --theme_dark--callout_text_brown: rgb(85, 35, 1); + + --theme_dark--callout_bg_orange: rgb(254, 214, 155); + --theme_dark--callout_text_orange: rgb(255, 140, 0); + + --theme_dark--callout_bg_yellow: #fcffd8; + --theme_dark--callout_text_yellow: #c76e00; + + --theme_dark--callout_bg_green: #d4edda; + --theme_dark--callout_text_green: #155724; + + --theme_dark--callout_bg_blue: #cce5ff; + --theme_dark--callout_text_blue: #004085; + + --theme_dark--callout_bg_purple: rgb(199, 178, 230); + --theme_dark--callout_text_purple: rgb(90, 49, 148); + + --theme_dark--callout_bg_pink: rgb(255, 206, 228); + --theme_dark--callout_text_pink: rgb(255, 0, 127); + + --theme_dark--callout_bg_red: #f8d7da; + --theme_dark--callout_text_red: #721c24; +} + +.notion-dark-theme + .notion-scroller.vertical.horizontal + .notion-table-view + .notion-selectable.notion-collection_view-block + > :first-child { + background: var(--theme--card) !important; +} + +/* todo 颜色 */ +.dark [style*='background: rgb(46, 170, 220)'], +.dark [style*='background-color: rgb(46, 170, 220)'] { + background: var(--theme_dark--option_active-background) !important; +} +.notion-to_do-block > div [role='button']:not(:hover) .check { + background: var(--theme_dark--option_active-background) !important; +} + +.notion-to_do-block > div [role='button']:not(:hover) .check polygon { + fill: var(--theme_dark--option_active-color) !important; +} + +/*================================= 标签颜色 + 文本背景色 ===============================**/ + +/* 灰色 */ +.dark [style*='background: rgba(151, 154, 155, 0.5)'] { + display: inline-block; + border-radius: 4px !important; + padding: 10px 0.4em !important; + font-weight: 500 !important; + background: var(--theme_dark--bg_gray) !important; + color: var(--theme_dark--bg_gray_text) !important; +} +.dark [style*='background:rgb(69,75,78)'] { + display: inline-block; + border-radius: 4px !important; + padding: 0 0.4em !important; + margin: 2px 0 !important; + font-weight: 500 !important; + background: var(--theme_dark--bg_gray) !important; + color: var(--theme_dark--bg_gray_text) !important; +} + +/* 棕色 */ +.dark [style*='background: rgba(147, 114, 100, 0.5)'] { + display: inline-block; + border-radius: 4px !important; + padding: 10px 0.4em !important; + font-weight: 500 !important; + background: var(--theme_dark--bg_brown) !important; + color: var(--theme_dark--bg_brown_text) !important; +} +.dark [style*='background:rgb(67,64,64)'] { + display: inline-block; + border-radius: 4px !important; + padding: 0 0.4em !important; + margin: 2px 0 !important; + font-weight: 500 !important; + background: var(--theme_dark--bg_brown) !important; + color: var(--theme_dark--bg_brown_text) !important; +} + +/* 橘黄色 */ +.dark [style*='background: rgba(255, 163, 68, 0.5)'] { + display: inline-block; + border-radius: 4px !important; + padding: 10px 0.4em !important; + font-weight: 500 !important; + background: var(--theme_dark--bg_orange) !important; + color: var(--theme_dark--bg_orange_text) !important; +} + +.dark [style*='background:rgb(89,74,58)'] { + display: inline-block; + border-radius: 4px !important; + padding: 0 0.4em !important; + margin: 2px 0 !important; + font-weight: 500 !important; + background: var(--theme_dark--bg_orange) !important; + color: var(--theme_dark--bg_orange_text) !important; +} + +/* 黄色 */ +.dark [style*='background: rgba(255, 220, 73, 0.5)'] { + display: inline-block; + border-radius: 4px !important; + padding: 10px 0.4em !important; + font-weight: 500 !important; + background: var(--theme_dark--bg_yellow) !important; + color: var(--theme_dark--bg_yellow_text) !important; +} +.dark [style*='background:rgb(89,86,59)'] { + display: inline-block; + border-radius: 4px !important; + padding: 0 0.4em !important; + margin: 2px 0 !important; + font-weight: 500 !important; + background: var(--theme_dark--bg_yellow) !important; + color: var(--theme_dark--bg_yellow_text) !important; +} + +/* 绿色 */ +.dark [style*='background: rgba(77, 171, 154, 0.5)'] { + display: inline-block; + border-radius: 4px !important; + padding: 10px 0.4em !important; + font-weight: 500 !important; + background: var(--theme_dark--bg_green) !important; + color: var(--theme_dark--bg_green_text) !important; +} +.dark [style*='background:rgb(53,76,75)'] { + display: inline-block; + border-radius: 4px !important; + padding: 0 0.4em !important; + margin: 2px 0 !important; + font-weight: 500 !important; + background: var(--theme_dark--bg_green) !important; + color: var(--theme_dark--bg_green_text) !important; +} + +/* 蓝色 */ +.dark [style*='background: rgba(82, 156, 202, 0.5)'] { + display: inline-block; + border-radius: 4px !important; + padding: 10px 0.4em !important; + font-weight: 500 !important; + background: var(--theme_dark--bg_blue) !important; + color: var(--theme_dark--bg_blue_text) !important; +} +.dark [style*='background:rgb(54,73,84)'] { + display: inline-block; + border-radius: 4px !important; + padding: 0 0.4em !important; + margin: 2px 0 !important; + font-weight: 500 !important; + background: var(--theme_dark--bg_blue) !important; + color: var(--theme_dark--bg_blue_text) !important; +} + +/* 紫色 */ +.dark [style*='background: rgba(154, 109, 215, 0.5)'] { + display: inline-block; + border-radius: 4px !important; + padding: 10px 0.4em !important; + font-weight: 500 !important; + background: var(--theme_dark--bg_purple) !important; + color: var(--theme_dark--bg_purple_text) !important; +} +.dark [style*='background:rgb(68,63,87)'] { + display: inline-block; + border-radius: 4px !important; + padding: 0 0.4em !important; + margin: 2px 0 !important; + font-weight: 500 !important; + background: var(--theme_dark--bg_purple) !important; + color: var(--theme_dark--bg_purple_text) !important; +} + +/* 粉红色 */ +.dark [style*='background: rgba(226, 85, 161, 0.5)'] { + display: inline-block; + border-radius: 4px !important; + padding: 10px 0.4em !important; + font-weight: 500 !important; + background: var(--theme_dark--bg_pink) !important; + color: var(--theme_dark--bg_pink_text) !important; +} +.dark [style*='background:rgb(83,59,76)'] { + display: inline-block; + border-radius: 4px !important; + padding: 0 0.4em !important; + margin: 2px 0 !important; + font-weight: 500 !important; + background: var(--theme_dark--bg_pink) !important; + color: var(--theme_dark--bg_pink_text) !important; +} + +/* 红色 */ +.dark [style*='background: rgba(255, 115, 105, 0.5);'] { + display: inline-block; + border-radius: 4px !important; + padding: 10px 0.4em !important; + font-weight: 500 !important; + background: var(--theme_dark--bg_red) !important; + color: var(--theme_dark--bg_red_text) !important; +} +.dark [style*='background:rgb(89,65,65)'] { + display: inline-block; + border-radius: 4px !important; + padding: 0 0.4em !important; + margin: 2px 0 !important; + font-weight: 500 !important; + background: var(--theme_dark--bg_red) !important; + color: var(--theme_dark--bg_red_text) !important; +} + +/* -----------------------------callout 样式 start------------------------ */ + +/* notion-callout-block gray */ +.notion-dark-theme + .notion-callout-block + [style*='background: rgba(69, 75, 78, 0.3)'] { + /* color: var(--theme_dark--callout_text_gray) !important; */ + background: var(--theme_dark--callout_bg_gray) !important; + border-radius: 3px !important; +} + +.notion-dark-theme + .notion-callout-block + [style*='background: rgba(69, 75, 78, 0.3)'] + [style*='color: rgba(255, 255, 255, 0.9)'] { + color: var(--theme_dark--callout_text_gray) !important; +} + +/* notion-callout-block brown */ +.notion-dark-theme + .notion-callout-block + [style*='background: rgba(67, 64, 64, 0.3)'] { + /* color: var(--theme_dark--callout_text_brown) !important; */ + background: var(--theme_dark--callout_bg_brown) !important; + border-radius: 3px !important; +} + +.notion-dark-theme + .notion-callout-block + [style*='background: rgba(67, 64, 64, 0.3)'] + [style*='color: rgba(255, 255, 255, 0.9)'] { + color: var(--theme_dark--callout_text_brown) !important; +} + +/* notion-callout-block orange */ +.notion-dark-theme + .notion-callout-block + [style*='background: rgba(89, 74, 58, 0.3)'] { + /* color: var(--theme_dark--callout_text_orange) !important; */ + background: var(--theme_dark--callout_bg_orange) !important; + border-radius: 3px !important; +} + +.notion-dark-theme + .notion-callout-block + [style*='background: rgba(89, 74, 58, 0.3)'] + [style*='color: rgba(255, 255, 255, 0.9)'] { + color: var(--theme_dark--callout_text_orange) !important; +} + +/* notion-callout-block yellow */ +.notion-dark-theme + .notion-callout-block + [style*='background: rgba(89, 86, 59, 0.3)'] { + /* color: var(--theme_dark--callout_text_yellow) !important; */ + background: var(--theme_dark--callout_bg_yellow) !important; + border-radius: 3px !important; +} + +.notion-dark-theme + .notion-callout-block + [style*='background: rgba(89, 86, 59, 0.3)'] + [style*='color: rgba(255, 255, 255, 0.9)'] { + color: var(--theme_dark--callout_text_yellow) !important; +} + +/* notion-callout-block green */ +.notion-dark-theme + .notion-callout-block + [style*='background: rgba(53, 76, 75, 0.3)'] { + /* color: var(--theme_dark--callout_text_green) !important; */ + background: var(--theme_dark--callout_bg_green) !important; + border-radius: 3px !important; +} + +.notion-dark-theme + .notion-callout-block + [style*='background: rgba(53, 76, 75, 0.3)'] + [style*='color: rgba(255, 255, 255, 0.9)'] { + color: var(--theme_dark--callout_text_green) !important; +} + +/* notion-callout-block blue */ +.notion-dark-theme + .notion-callout-block + [style*='background: rgba(54, 73, 84, 0.3)'] { + /* color: var(--theme_dark--callout_text_blue) !important; */ + background: var(--theme_dark--callout_bg_blue) !important; + border-radius: 3px !important; +} + +.notion-dark-theme + .notion-callout-block + [style*='background: rgba(54, 73, 84, 0.3)'] + [style*='color: rgba(255, 255, 255, 0.9)'] { + color: var(--theme_dark--callout_text_blue) !important; +} + +/* notion-callout-block purple */ +.notion-dark-theme + .notion-callout-block + [style*='background: rgba(68, 63, 87, 0.3)'] { + /* color: var(--theme_dark--callout_text_purple) !important; */ + background: var(--theme_dark--callout_bg_purple) !important; + border-radius: 3px !important; +} + +.notion-dark-theme + .notion-callout-block + [style*='background: rgba(68, 63, 87, 0.3)'] + [style*='color: rgba(255, 255, 255, 0.9)'] { + color: var(--theme_dark--callout_text_purple) !important; +} + +/* notion-callout-block pink */ +.notion-dark-theme + .notion-callout-block + [style*='background: rgba(83, 59, 76, 0.3)'] { + /* color: var(--theme_dark--callout_text_pink) !important; */ + background: var(--theme_dark--callout_bg_pink) !important; + border-radius: 3px !important; +} + +.notion-dark-theme + .notion-callout-block + [style*='background: rgba(83, 59, 76, 0.3)'] + [style*='color: rgba(255, 255, 255, 0.9)'] { + color: var(--theme_dark--callout_text_pink) !important; +} + +/* notion-callout-block red */ +.notion-dark-theme + .notion-callout-block + [style*='background: rgba(89, 65, 65, 0.3)'] { + /* color: var(--theme_dark--callout_text_red) !important; */ + background: var(--theme_dark--callout_bg_red) !important; + border-radius: 3px !important; +} + +.notion-dark-theme + .notion-callout-block + [style*='background: rgba(89, 65, 65, 0.3)'] + [style*='color: rgba(255, 255, 255, 0.9)'] { + color: var(--theme_dark--callout_text_red) !important; +} + +/* -----------------------------callout 样式 end---------------------------- */ + +/* ===================== header =========================== */ +.notion-dark-theme [placeholder*='Heading 1'] { + color: var(--theme_dark--h1_text) !important; +} + +.notion-dark-theme [placeholder*='Heading 2'] { + margin-bottom: 16px; + border-bottom: 4px solid var(--theme_dark--h2_text); + display: inline-block; + color: var(--theme_dark--h2_text) !important; + width: auto !important; + padding: 6px 12px 6px 0 !important; + position: relative; +} + +.notion-dark-theme [placeholder*='Heading 2']::before { + content: '🔥 '; +} + +.notion-dark-theme [placeholder*='Heading 3'] { + width: fit-content !important; + padding: 4px 10px !important; + border-radius: 10px; + border: 2px solid var(--theme_dark--h3_text); + color: var(--theme_dark--h3_text) !important; + background-color: #fbf8e7; + display: inline-block; + margin-bottom: 14px; +} + +.notion-dark-theme [placeholder*='Heading 3']::before { + content: '📌 '; +} + +/* list 样式 */ +.notion-dark-theme + [style*='font-size: 1.5em; line-height: 1; margin-bottom: 0.1em;'] { + color: #a830fd !important; +} + +/* quoteblock 样式 */ +.notion-dark-theme + .notion-quote-block + [style*='caret-color: rgba(255, 255, 255, 0.9);'] { + font-size: 0.85em !important; + border-left: none !important; + padding: 0.5em 0.5em 0.5em 1.9em !important; + position: relative; + margin: 10px 0; + background: #9494942e; + border-radius: 3px; +} + +.notion-dark-theme + .notion-quote-block + [style*='caret-color: rgba(255, 255, 255, 0.9);']::before { + content: '\201C'; + font-family: Georgia, serif; + font-size: 44px; + font-weight: bold; + color: #7b08fa; + position: absolute; + left: 0px; + top: -24px; +} + +/* link style */ +.notion-dark-theme .notion-link-token span { + border-bottom: 0.05em solid; + border-color: rgb(233, 51, 38) !important; + border-width: 3px !important; + opacity: 1 !important; +} + +.notion-dark-theme .notion-link-token span:hover { + color: rgb(233, 51, 38) !important; +} + +/* code */ +.dark [style*='color:#EB5757'] { + color: var(--theme_dark--code_inline-text) !important; + background: var(--theme_dark--code_inline-background) !important; +} diff --git a/mods/littlepig-light/mod.js b/mods/littlepig-light/mod.js new file mode 100644 index 0000000..319d127 --- /dev/null +++ b/mods/littlepig-light/mod.js @@ -0,0 +1,23 @@ +/* + * littlepig + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * (c) 2020 Lizishan + * under the MIT license + */ + +'use strict'; + +module.exports = { + id: 'ad923617-e76e-408e-9f23-490738a32238', + tags: ['theme', 'light'], + name: 'littlepig light', + desc: 'a bright monospaced theme using emojis and colourful text.', + version: '0.1.1', + author: { + name: 'Lizishan', + link: 'https://www.reddit.com/user/Lizishan/', + 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/styles.css b/mods/littlepig-light/styles.css new file mode 100644 index 0000000..334b27c --- /dev/null +++ b/mods/littlepig-light/styles.css @@ -0,0 +1,605 @@ +/* + * littlepig + * (c) 2020 dragonwocky + * (c) 2020 Lizishan + * under the MIT license + */ + +:root { + --theme_light--font_sans: 'JetBrains Mono'; + --theme_light--font_mono: 'JetBrains Mono'; + --theme_light--font_code: 'JetBrains Mono'; + + --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_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: 17px; + --theme_light--font_code-size: 16px; + --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(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--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--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: 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: var(--theme_light--bg_gray); + --theme_light--select_brown: var(--theme_light--bg_brown); + --theme_light--select_orange: var(--theme_light--bg_orange); + --theme_light--select_yellow: var(--theme_light--bg_yellow); + --theme_light--select_green: var(--theme_light--bg_green); + --theme_light--select_blue: var(--theme_light--bg_blue); + --theme_light--select_purple: var(--theme_light--bg_purple); + --theme_light--select_pink: var(--theme_light--bg_pink); + --theme_light--select_red: var(--theme_light--bg_red); + + /* inline code */ + --theme_light--code_inline-text: #ffffff; + --theme_light--code_inline-background: rgb(179, 39, 39); + + --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; + + /* 标题色 */ + --theme_light--h1_text: #008800; + --theme_light--h2_text: #006a00; + --theme_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_bg_gray: #e2e3e5; + --theme_light--callout_text_gray: #383d41; + + --theme_light--callout_bg_brown: rgb(130, 118, 111); + --theme_light--callout_text_brown: rgb(85, 35, 1); + + --theme_light--callout_bg_orange: rgb(254, 214, 155); + --theme_light--callout_text_orange: rgb(255, 140, 0); + + --theme_light--callout_bg_yellow: #fcffd8; + --theme_light--callout_text_yellow: #c76e00; + + --theme_light--callout_bg_green: #d4edda; + --theme_light--callout_text_green: #155724; + + --theme_light--callout_bg_blue: #cce5ff; + --theme_light--callout_text_blue: #004085; + + --theme_light--callout_bg_purple: rgb(199, 178, 230); + --theme_light--callout_text_purple: rgb(90, 49, 148); + + --theme_light--callout_bg_pink: rgb(255, 206, 228); + --theme_light--callout_text_pink: rgb(255, 0, 127); + + --theme_light--callout_bg_red: #f8d7da; + --theme_light--callout_text_red: #721c24; +} + +/* todo 颜色 */ +.notion-body:not(.dark) [style*='background: rgb(46, 170, 220)'] { + background: var(--theme_light--option_active-background) !important; +} +.notion-body:not(.dark) + [style*='background: rgb(46, 170, 220)'][role='button'] { + background: var(--theme_light--primary) !important; +} + +.notion-body:not(.dark) + [style*='background: rgb(46, 170, 220);'][style*='width: 26px'] { + background: var(--theme_light--primary) !important; +} + +.notion-body:not(.dark) + .notion-to_do-block + > div + [role='button']:not(:hover) + .check { + background: var(--theme_light--option_active-background) !important; +} + +.notion-body:not(.dark) + .notion-to_do-block + > div + [role='button']:not(:hover) + .check + polygon { + fill: var(--theme_light--option_active-color) !important; +} + +/*================================= 标签颜色 + 文本背景色 ===============================**/ + +/* 灰色 */ +.notion-body:not(.dark) [style*='background: rgba(155, 154, 151, 0.4)'] { + display: inline-block; + border-radius: 4px !important; + padding: 10px 0.4em !important; + font-weight: 500 !important; + background: var(--theme_light--bg_gray) !important; + color: var(--theme_light--bg_gray_text) !important; +} +.notion-body:not(.dark) [style*='background:rgb(235,236,237)'] { + display: inline-block; + border-radius: 4px !important; + padding: 0 0.4em !important; + margin: 2px 0 !important; + font-weight: 500 !important; + background: var(--theme_light--bg_gray) !important; + color: var(--theme_light--bg_gray_text) !important; +} + +/* 棕色 */ +.notion-body:not(.dark) [style*='background: rgba(140, 46, 0, 0.2)'] { + display: inline-block; + border-radius: 4px !important; + padding: 10px 0.4em !important; + font-weight: 500 !important; + background: var(--theme_light--bg_brown) !important; + color: var(--theme_light--bg_brown_text) !important; +} +.notion-body:not(.dark) [style*='background:rgb(233,229,227)'] { + display: inline-block; + border-radius: 4px !important; + padding: 0 0.4em !important; + margin: 2px 0 !important; + font-weight: 500 !important; + background: var(--theme_light--bg_brown) !important; + color: var(--theme_light--bg_brown_text) !important; +} + +/* 橘黄色 */ +.notion-body:not(.dark) [style*='background: rgba(245, 93, 0, 0.2)'] { + display: inline-block; + border-radius: 4px !important; + padding: 10px 0.4em !important; + font-weight: 500 !important; + background: var(--theme_light--bg_orange) !important; + color: var(--theme_light--bg_orange_text) !important; +} + +.notion-body:not(.dark) [style*='background:rgb(250,235,221)'] { + display: inline-block; + border-radius: 4px !important; + padding: 0 0.4em !important; + margin: 2px 0 !important; + font-weight: 500 !important; + background: var(--theme_light--bg_orange) !important; + color: var(--theme_light--bg_orange_text) !important; +} + +/* 黄色 */ +.notion-body:not(.dark) [style*='background: rgba(233, 168, 0, 0.2)'] { + display: inline-block; + border-radius: 4px !important; + padding: 10px 0.4em !important; + font-weight: 500 !important; + background: var(--theme_light--bg_yellow) !important; + color: var(--theme_light--bg_yellow_text) !important; +} +.notion-body:not(.dark) [style*='background:rgb(251,243,219)'] { + display: inline-block; + border-radius: 4px !important; + padding: 0 0.4em !important; + margin: 2px 0 !important; + font-weight: 500 !important; + background: var(--theme_light--bg_yellow) !important; + color: var(--theme_light--bg_yellow_text) !important; +} + +/* 绿色 */ +.notion-body:not(.dark) [style*='background: rgba(0, 135, 107, 0.2)'] { + display: inline-block; + border-radius: 4px !important; + padding: 10px 0.4em !important; + font-weight: 500 !important; + background: var(--theme_light--bg_green) !important; + color: var(--theme_light--bg_green_text) !important; +} +.notion-body:not(.dark) [style*='background:rgb(221,237,234)'] { + display: inline-block; + border-radius: 4px !important; + padding: 0 0.4em !important; + margin: 2px 0 !important; + font-weight: 500 !important; + background: var(--theme_light--bg_green) !important; + color: var(--theme_light--bg_green_text) !important; +} + +/* 蓝色 */ +.notion-body:not(.dark) [style*='background: rgba(0, 120, 223, 0.2)'] { + display: inline-block; + border-radius: 4px !important; + padding: 10px 0.4em !important; + font-weight: 500 !important; + background: var(--theme_light--bg_blue) !important; + color: var(--theme_light--bg_blue_text) !important; +} +.notion-body:not(.dark) [style*='background:rgb(221,235,241)'] { + display: inline-block; + border-radius: 4px !important; + padding: 0 0.4em !important; + margin: 2px 0 !important; + font-weight: 500 !important; + background: var(--theme_light--bg_blue) !important; + color: var(--theme_light--bg_blue_text) !important; +} + +/* 紫色 */ +.notion-body:not(.dark) [style*='background: rgba(103, 36, 222, 0.2)'] { + display: inline-block; + border-radius: 4px !important; + padding: 10px 0.4em !important; + font-weight: 500 !important; + background: var(--theme_light--bg_purple) !important; + color: var(--theme_light--bg_purple_text) !important; +} +.notion-body:not(.dark) [style*='background:rgb(234,228,242)'] { + display: inline-block; + border-radius: 4px !important; + padding: 0 0.4em !important; + margin: 2px 0 !important; + font-weight: 500 !important; + background: var(--theme_light--bg_purple) !important; + color: var(--theme_light--bg_purple_text) !important; +} + +/* 粉红色 */ +.notion-body:not(.dark) [style*='background: rgba(221, 0, 129, 0.2)'] { + display: inline-block; + border-radius: 4px !important; + padding: 10px 0.4em !important; + font-weight: 500 !important; + background: var(--theme_light--bg_pink) !important; + color: var(--theme_light--bg_pink_text) !important; +} +.notion-body:not(.dark) [style*='background:rgb(244,223,235)'] { + display: inline-block; + border-radius: 4px !important; + padding: 0 0.4em !important; + margin: 2px 0 !important; + font-weight: 500 !important; + background: var(--theme_light--bg_pink) !important; + color: var(--theme_light--bg_pink_text) !important; +} + +/* 红色 */ +.notion-body:not(.dark) [style*='background: rgba(255, 0, 26, 0.2)'] { + display: inline-block; + border-radius: 4px !important; + padding: 10px 0.4em !important; + font-weight: 500 !important; + background: var(--theme_light--bg_red) !important; + color: var(--theme_light--bg_red_text) !important; +} +.notion-body:not(.dark) [style*='background:rgb(251,228,228)'] { + display: inline-block; + border-radius: 4px !important; + padding: 0 0.4em !important; + margin: 2px 0 !important; + font-weight: 500 !important; + background: var(--theme_light--bg_red) !important; + color: var(--theme_light--bg_red_text) !important; +} + +/* -----------------------------callout 样式 start------------------------ */ + +/* notion-callout-block gray */ +.notion-body:not(.dark) + .notion-callout-block + [style*='background: rgba(235, 236, 237, 0.3);'] { + /* color: var(--theme_light--callout_text_gray) !important; */ + background: var(--theme_light--callout_bg_gray) !important; + border-radius: 3px !important; +} + +.notion-body:not(.dark) + .notion-callout-block + [style*='background: rgba(235, 236, 237, 0.3);'] + [style*='color: rgb(55, 53, 47);'] { + color: var(--theme_light--callout_text_gray) !important; +} + +/* notion-callout-block brown */ +.notion-body:not(.dark) + .notion-callout-block + [style*='background: rgba(233, 229, 227, 0.3);'] { + /* color: var(--theme_light--callout_text_brown) !important; */ + background: var(--theme_light--callout_bg_brown) !important; + border-radius: 3px !important; +} + +.notion-body:not(.dark) + .notion-callout-block + [style*='background: rgba(233, 229, 227, 0.3);'] + [style*='color: rgb(55, 53, 47);'] { + color: var(--theme_light--callout_text_brown) !important; +} + +/* notion-callout-block orange */ +.notion-body:not(.dark) + .notion-callout-block + [style*='background: rgba(250, 235, 221, 0.3);'] { + /* color: var(--theme_light--callout_text_orange) !important; */ + background: var(--theme_light--callout_bg_orange) !important; + border-radius: 3px !important; +} + +.notion-body:not(.dark) + .notion-callout-block + [style*='background: rgba(250, 235, 221, 0.3);'] + [style*='color: rgb(55, 53, 47);'] { + color: var(--theme_light--callout_text_orange) !important; +} + +/* notion-callout-block yellow */ +.notion-body:not(.dark) + .notion-callout-block + [style*='background: rgba(251, 243, 219, 0.3);'] { + /* color: var(--theme_light--callout_text_yellow) !important; */ + background: var(--theme_light--callout_bg_yellow) !important; + border-radius: 3px !important; +} + +.notion-body:not(.dark) + .notion-callout-block + [style*='background: rgba(251, 243, 219, 0.3);'] + [style*='color: rgb(55, 53, 47);'] { + color: var(--theme_light--callout_text_yellow) !important; +} + +/* notion-callout-block green */ +.notion-body:not(.dark) + .notion-callout-block + [style*='background: rgba(221, 237, 234, 0.3);'] { + /* color: var(--theme_light--callout_text_green) !important; */ + background: var(--theme_light--callout_bg_green) !important; + border-radius: 3px !important; +} + +.notion-body:not(.dark) + .notion-callout-block + [style*='background: rgba(221, 237, 234, 0.3);'] + [style*='color: rgb(55, 53, 47);'] { + color: var(--theme_light--callout_text_green) !important; +} + +/* notion-callout-block blue */ +.notion-body:not(.dark) + .notion-callout-block + [style*='background: rgba(221, 235, 241, 0.3);'] { + /* color: var(--theme_light--callout_text_blue) !important; */ + background: var(--theme_light--callout_bg_blue) !important; + border-radius: 3px !important; +} + +.notion-body:not(.dark) + .notion-callout-block + [style*='background: rgba(221, 235, 241, 0.3);'] + [style*='color: rgb(55, 53, 47);'] { + color: var(--theme_light--callout_text_blue) !important; +} + +/* notion-callout-block purple */ +.notion-body:not(.dark) + .notion-callout-block + [style*='background: rgba(234, 228, 242, 0.3);'] { + /* color: var(--theme_light--callout_text_purple) !important; */ + background: var(--theme_light--callout_bg_purple) !important; + border-radius: 3px !important; +} + +.notion-body:not(.dark) + .notion-callout-block + [style*='background: rgba(234, 228, 242, 0.3);'] + [style*='color: rgb(55, 53, 47);'] { + color: var(--theme_light--callout_text_purple) !important; +} + +/* notion-callout-block pink */ +.notion-body:not(.dark) + .notion-callout-block + [style*='background: rgba(244, 223, 235, 0.3);'] { + /* color: var(--theme_light--callout_text_pink) !important; */ + background: var(--theme_light--callout_bg_pink) !important; + border-radius: 3px !important; +} + +.notion-body:not(.dark) + .notion-callout-block + [style*='background: rgba(244, 223, 235, 0.3);'][style*='color: rgb(55, 53, 47);'] { + color: var(--theme_light--callout_text_pink) !important; +} + +/* notion-callout-block red */ +.notion-body:not(.dark) + .notion-callout-block + [style*='background: rgba(251, 228, 228, 0.3);'] { + /* color: var(--theme_light--callout_text_red) !important; */ + background: var(--theme_light--callout_bg_red) !important; + border-radius: 3px !important; +} + +.notion-body:not(.dark) + .notion-callout-block + [style*='background: rgba(251, 228, 228, 0.3);'] + [style*='color: rgb(55, 53, 47);'] { + color: var(--theme_light--callout_text_red) !important; +} + +/* -----------------------------callout 样式 end---------------------------- */ + +/* ===================== header =========================== */ +.notion-body:not(.dark) [placeholder*='Heading 1'] { + color: var(--theme_light--h1_text) !important; +} + +.notion-body:not(.dark) [placeholder*='Heading 2'] { + margin-bottom: 16px; + border-bottom: 4px solid var(--theme_light--h2_text); + display: inline-block; + color: var(--theme_light--h2_text) !important; + width: auto !important; + padding: 6px 12px 6px 0 !important; + position: relative; +} + +.notion-body:not(.dark) [placeholder*='Heading 2']::before { + content: '🔥 '; +} + +.notion-body:not(.dark) [placeholder*='Heading 3'] { + width: fit-content !important; + padding: 4px 10px !important; + border-radius: 10px; + border: 2px solid #42b983; + color: var(--theme_light--h3_text) !important; + background-color: #fbf8e7; + display: inline-block; + margin-bottom: 14px; +} + +.notion-body:not(.dark) [placeholder*='Heading 3']::before { + content: '📌 '; +} + +/* list 样式 */ +.notion-body:not(.dark) + [style*='font-size: 1.5em; line-height: 1; margin-bottom: 0.1em;'] { + color: #41b983 !important; +} + +/* quoteblock 样式 */ +.notion-body:not(.dark) .notion-quote-block [style*='rgb(55, 53, 47);'] { + font-size: 0.85em !important; + border-left: none !important; + padding: 0.5em 0.5em 0.5em 1.9em !important; + position: relative; + margin: 10px 0; + background: #9494942e; + border-radius: 3px; +} + +.notion-body:not(.dark) + .notion-quote-block + [style*='caret-color: rgb(55, 53, 47);']::before { + content: '\201C'; + font-family: Georgia, serif; + font-size: 44px; + font-weight: bold; + color: #42b983; + position: absolute; + left: 0px; + top: -24px; +} + +/* link style */ +.notion-body:not(.dark) .notion-link-token span { + border-bottom: 0.05em solid; + border-color: rgb(233, 51, 38) !important; + border-width: 3px !important; + opacity: 1 !important; +} + +.notion-body:not(.dark) .notion-link-token span:hover { + color: rgb(233, 51, 38) !important; +} + +/* code */ +.dark [style*='color:#EB5757'] { + color: var(--theme_light--code_inline-text) !important; + background: var(--theme_light--code_inline-background) !important; +} diff --git a/mods/neutral/mod.js b/mods/neutral/mod.js index 23a352e..51c13a3 100644 --- a/mods/neutral/mod.js +++ b/mods/neutral/mod.js @@ -12,6 +12,10 @@ module.exports = { tags: ['theme', 'dark'], name: 'neutral', desc: 'smoother colours and fonts, designed to be more pleasing to the eye.', - version: '0.1.1', + version: '0.1.2', 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/styles.css b/mods/neutral/styles.css index c814737..2a7b441 100644 --- a/mods/neutral/styles.css +++ b/mods/neutral/styles.css @@ -5,9 +5,6 @@ * 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 **/ diff --git a/mods/pastel-dark/mod.js b/mods/pastel-dark/mod.js index a69ff80..31e9358 100644 --- a/mods/pastel-dark/mod.js +++ b/mods/pastel-dark/mod.js @@ -12,11 +12,12 @@ module.exports = { tags: ['theme', 'dark'], name: 'pastel dark', desc: 'a smooth-transition true dark theme with a hint of pastel.', - version: '0.1.1', + version: '0.1.2', author: { name: 'zenith_illinois', link: 'https://www.reddit.com/user/zenith_illinois/', avatar: 'https://cdn.discordapp.com/avatars/565182533940150283/54f36546ab586298a5df5c238cbaaa4b.png?size=128', }, + fonts: ['https://rsms.me/inter/inter.css'], }; diff --git a/mods/pastel-dark/styles.css b/mods/pastel-dark/styles.css index 49c44bc..5ba0826 100644 --- a/mods/pastel-dark/styles.css +++ b/mods/pastel-dark/styles.css @@ -5,8 +5,6 @@ * under the MIT license */ -@import url('https://rsms.me/inter/inter.css'); - :root { --theme_dark--main: #0b0b0b; --theme_dark--sidebar: #0f0f0f; diff --git a/mods/property-layout/mod.js b/mods/property-layout/mod.js index ab3c16b..a6957d8 100644 --- a/mods/property-layout/mod.js +++ b/mods/property-layout/mod.js @@ -7,12 +7,14 @@ 'use strict'; +const helpers = require('../../pkg/helpers.js'); + 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.3', + version: '0.2.4', author: 'alexander-kazakov', hacks: { 'renderer/preload.js'(store, __exports) { @@ -30,7 +32,7 @@ module.exports = { function process(list) { queue = []; let properties = document.querySelector( - '.notion-scroller.vertical > :first-child [style="width: 100%; font-size: 14px;"]' + '.notion-scroller.vertical [style*="env(safe-area-inset-left)"] > [style="width: 100%; font-size: 14px;"]' ); if ( properties && @@ -40,19 +42,17 @@ module.exports = { 'propertylayout-enhanced', 'propertylayout-hidden' ); - const toggle = document.createElement('button'); - toggle.classList.add('propertylayout-toggle'); - toggle.setAttribute('data-action', 'show'); - toggle.innerText = '→ show properties'; + const toggle = helpers.createElement( + '' + ); toggle.addEventListener('click', (event) => { properties.classList.toggle('propertylayout-hidden'); - const action = properties.classList.contains( - 'propertylayout-hidden' - ) - ? 'show' - : 'hide'; - toggle.innerText = `→ ${action} properties`; - toggle.setAttribute('data-action', action); + toggle.setAttribute( + 'data-action', + properties.classList.contains('propertylayout-hidden') + ? 'show' + : 'hide' + ); }); if (properties.previousElementSibling) { properties.previousElementSibling.append(toggle); diff --git a/mods/property-layout/styles.css b/mods/property-layout/styles.css index e058aa5..8ebf4c1 100644 --- a/mods/property-layout/styles.css +++ b/mods/property-layout/styles.css @@ -26,6 +26,9 @@ .propertylayout-toggle[data-action='show'] { margin-bottom: 1em; } +.propertylayout-toggle::before { + content: '→ ' attr(data-action) ' '; +} .propertylayout-toggle:hover { background: var(--theme--interactive_hover); } diff --git a/mods/weekly-view/mod.js b/mods/weekly-view/mod.js index 17437a5..e18bede 100644 --- a/mods/weekly-view/mod.js +++ b/mods/weekly-view/mod.js @@ -12,7 +12,7 @@ module.exports = { tags: ['extension'], name: 'weekly view', desc: 'calendar views named "weekly" will show only the 7 days of this week.', - version: '0.5.0', + version: '0.5.1', author: 'adihd', hacks: { 'renderer/preload.js'(store, __exports) { @@ -36,15 +36,17 @@ module.exports = { if (!collection_view || collection_view.innerText != 'weekly') return; const days = collection_view.parentElement.parentElement.parentElement.parentElement.getElementsByClassName( - 'notion-calendar-view-day' - ); + 'notion-calendar-view-day' + ), + today = [...days].find((day) => day.style.background), + height = today + ? getComputedStyle( + today.parentElement.parentElement + ).getPropertyValue('height') + : 0; 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'; - } + if (today) today.parentElement.parentElement.style.height = height; } } }); diff --git a/package.json b/package.json index 6eff1f9..1287311 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "notion-enhancer", - "version": "0.8.5", + "version": "0.9.0-wip", "description": "an enhancer/customiser for the all-in-one productivity workspace notion.so", "main": "index.js", "bin": { @@ -9,7 +9,7 @@ "scripts": { "test": "echo \"no test specified\"", "postinstall": "node bin.js apply -y", - "preuninstall": "node bin.js remove -y" + "preuninstall": "node bin.js remove" }, "repository": { "type": "git", diff --git a/pkg/apply.js b/pkg/apply.js index fb4a9a3..f360ea3 100644 --- a/pkg/apply.js +++ b/pkg/apply.js @@ -30,10 +30,10 @@ module.exports = async function ({ overwrite_version, friendly_errors } = {}) { const check_app = await require('./check.js')(); switch (check_app.code) { case 1: - console.log(`~~ notion-enhancer v${version} already applied.`); + console.info(`~~ notion-enhancer v${version} already applied.`); return true; case 2: - console.log(` * ${check_app.msg}`); + console.warn(` * ${check_app.msg}`); do { process.stdout.write(' > overwrite? [Y/n]: '); overwrite_version = await helpers.readline(); diff --git a/pkg/helpers.js b/pkg/helpers.js index d8309eb..bfaaaeb 100644 --- a/pkg/helpers.js +++ b/pkg/helpers.js @@ -9,8 +9,7 @@ const os = require('os'), path = require('path'), fs = require('fs-extra'), - { exec, execSync } = require('child_process'), - { promisify } = require('util'); + { execSync } = require('child_process'); // used to differentiate between "enhancer failed" and "code broken" errors. class EnhancerError extends Error { @@ -128,6 +127,7 @@ function getEnhancements() { !mod.name || !mod.version || !mod.author || + (mod.fonts && !mod.fonts.every((font) => typeof font === 'string')) || (mod.options && !mod.options.every((opt) => ['toggle', 'select', 'input', 'file', 'color'].includes(opt.type) @@ -169,6 +169,13 @@ function readline() { }); } +// construct a HTMLElement from a string +function createElement(html) { + const template = document.createElement('template'); + template.innerHTML = html.trim(); + return template.content.firstElementChild; +} + module.exports = { EnhancerError, is_wsl, @@ -178,4 +185,5 @@ module.exports = { getEnhancements, getJSON, readline, + createElement, }; diff --git a/pkg/helpers.md b/pkg/helpers.md index 52ba37e..5e84fe0 100644 --- a/pkg/helpers.md +++ b/pkg/helpers.md @@ -120,3 +120,15 @@ if (overwrite) { // do stuff } else console.info(' -- keeping file: skipping step.'); ``` + +--- + +```js +function createElement(html) { + const template = document.createElement('template'); + template.innerHTML = html.trim(); + return template.content.firstElementChild; +} +``` + +use `helpers.createElement(html)` to turn a html-valid string into an element to add to the page. diff --git a/pkg/loader.js b/pkg/loader.js index 14b45ab..a70f1a8 100644 --- a/pkg/loader.js +++ b/pkg/loader.js @@ -69,10 +69,16 @@ module.exports = function (__file, __exports) { ) { document.addEventListener('readystatechange', (event) => { if (document.readyState !== 'complete') return false; - const style = document.createElement('link'); - style.rel = 'stylesheet'; - style.href = `enhancement://${mod.dir}/styles.css`; - document.querySelector('head').appendChild(style); + for (let rules of [ + `enhancement://${mod.dir}/styles.css`, + ...(mod.fonts || []), + ]) { + document + .querySelector('head') + .appendChild( + helpers.createElement(``) + ); + } }); } if (mod.hacks && mod.hacks[__file]) { diff --git a/pkg/remove.js b/pkg/remove.js index 98d608c..19917a5 100644 --- a/pkg/remove.js +++ b/pkg/remove.js @@ -68,7 +68,7 @@ module.exports = async function ({ // cleaning data folder: ~/.notion-enhancer if (await fs.pathExists(helpers.data_folder)) { - console.log(` ...data folder ${helpers.data_folder} found.`); + console.info(` ...data folder ${helpers.data_folder} found.`); if (delete_data === undefined) { do { process.stdout.write(' > delete? [Y/n]: ');