diff --git a/mods/bracketed-links/styles.css b/mods/bracketed-links/styles.css new file mode 100644 index 0000000..3087e62 --- /dev/null +++ b/mods/bracketed-links/styles.css @@ -0,0 +1,24 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky + * (c) 2020 Arecsu + * (https://dragonwocky.me/) under the MIT license + */ + +.notion-link-token span { + border-bottom: none !important; +} +.notion-link-token:before { + content: '['; + opacity: 0.7; + transition: opacity 100ms ease-in; +} +.notion-link-token:after { + content: ']'; + opacity: 0.7; + transition: opacity 100ms ease-in; +} +.notion-link-token:hover::before, +.notion-link-token:hover::after { + opacity: 1; +} diff --git a/mods/core/titlebar.js b/mods/core/client.js similarity index 83% rename from mods/core/titlebar.js rename to mods/core/client.js index aa3e711..ecdfb4b 100644 --- a/mods/core/titlebar.js +++ b/mods/core/client.js @@ -19,14 +19,29 @@ module.exports = (defaults) => if (event.code === 'F5') window.reload(); }); - const attempt = setInterval(enhance, 500); + const interval_attempts = { + enhance: setInterval(enhance, 500), + }; async function enhance() { if (!document.querySelector('.notion-frame')) return; - clearInterval(attempt); + clearInterval(interval_attempts.enhance); // scrollbars - if (settings.smooth_scrollbars) + if (settings.smooth_scrollbars) { document.body.classList.add('smooth-scrollbars'); + interval_attempts.patchScrollbars = setInterval(patchScrollbars, 50); + function patchScrollbars() { + const sidebar = document.querySelector( + '.notion-scroller.vertical[style*="overflow: hidden auto;"]' + ); + if (!sidebar) return; + clearInterval(interval_attempts.patchScrollbars); + sidebar.style.overflow = ''; + setTimeout(() => { + sidebar.style.overflow = 'hidden auto'; + }, 1); + } + } // frameless if (settings.frameless) { @@ -38,11 +53,14 @@ module.exports = (defaults) => document.querySelector('.notion-topbar').prepend(dragarea); document.documentElement.style.setProperty( '--configured-dragarea_height', - `${settings.dragarea_height}px` + `${settings.dragarea_height + 2}px` ); let sidebar_width; - setInterval(() => { + interval_attempts.patchDragarea = setInterval(patchDragarea, 50); + function patchDragarea() { const sidebar = document.querySelector('.notion-sidebar'); + if (!sidebar) return; + clearInterval(interval_attempts.patchDragarea); let new_width = sidebar.style.height === 'auto' ? '0px' : sidebar.style.width; if (sidebar_width !== new_width) { @@ -51,7 +69,8 @@ module.exports = (defaults) => `enhancer:sidebar-width-${sidebar_width}` ); } - }, 100); + } + setInterval(() => {}, 100); } // window buttons diff --git a/mods/core/dragarea.js b/mods/core/dragarea.js index b204f4b..13656c1 100644 --- a/mods/core/dragarea.js +++ b/mods/core/dragarea.js @@ -22,8 +22,11 @@ module.exports = (defaults) => if (event.channel.startsWith('enhancer:sidebar-width-')) dragarea.setAttribute( 'style', - `${default_styles} height: ${settings.dragarea_height}px; left: ${ - event.channel.slice('enhancer:sidebar-width-'.length)};` + `${default_styles} top: 2px; height: ${ + settings.dragarea_height + }px; left: ${event.channel.slice( + 'enhancer:sidebar-width-'.length + )};` ); }); }; diff --git a/mods/core/mod.js b/mods/core/mod.js index 813df8d..5e6ed8c 100644 --- a/mods/core/mod.js +++ b/mods/core/mod.js @@ -9,7 +9,7 @@ const defaults = { maximized: false, close_to_tray: true, frameless: true, - dragarea_height: 12.5, + dragarea_height: 15, smooth_scrollbars: true, hotkey: 'CmdOrCtrl+Shift+A', }; @@ -29,6 +29,6 @@ module.exports = { 'main/main.js': require('./tray.js')(defaults), 'main/createWindow.js': require('./window.js')(defaults), 'renderer/index.js': require('./dragarea.js')(defaults), - 'renderer/preload.js': require('./titlebar.js')(defaults), + 'renderer/preload.js': require('./client.js')(defaults), }, }; diff --git a/mods/core/theme.css b/mods/core/theme.css index 04dcf82..97a8854 100644 --- a/mods/core/theme.css +++ b/mods/core/theme.css @@ -2,14 +2,14 @@ * notion-enhancer * (c) 2020 dragonwocky * (c) 2020 TarasokUA + * (c) 2020 Arecsu + * (c) 2020 u/zenith_illinois * (https://dragonwocky.me/) under the MIT license */ :root { /** light **/ - --theme_light-main-height: 100%; - --theme_light-font_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol'; @@ -33,7 +33,6 @@ /** dark **/ --theme_dark-main: rgb(47, 52, 55); - --theme_dark-main-height: 100%; --theme_dark-sidebar: rgb(55, 60, 63); --theme_dark-dragarea: #272d2f; --theme_dark-preview-width: 977px; @@ -62,13 +61,23 @@ --theme_dark-button_close-fill: white; --theme_dark-button_hover-border: transparent; - --theme_dark-block-selected: rgba(139, 220, 46, 0.2); + --theme_dark-selected: rgba(46, 170, 220, 0.2); --theme_dark-primary: rgb(46, 170, 220); --theme_dark-primary_hover: rgb(6, 156, 205); --theme_dark-primary_click: rgb(0, 141, 190); --theme_dark-primary_indicator: rgb(235, 87, 87); + --theme_dark-todo_empty-border: currentColor; + --theme_dark-todo_ticked: currentColor; + --theme_dark-todo_ticked-background: var(--theme_dark-primary); + --theme_dark-todo_hover-background: rgb(71, 76, 80); + + --theme_dark-danger_text: rgb(235, 87, 87); + --theme_dark-danger_border: rgba(235, 87, 87, 0.5); + --theme_dark-text: rgba(255, 255, 255, 0.9); + --theme_dark-text_ui: rgba(255, 255, 255, 0.6); + --theme_dark-text_ui_dark: rgba(255, 255, 255, 0.4); --theme_dark-text_gray: rgba(151, 154, 155, 0.95); --theme_dark-text_brown: rgb(147, 114, 100); --theme_dark-text_orange: rgb(255, 163, 68); @@ -97,7 +106,9 @@ --theme_dark-line_pink: rgb(83, 59, 76); --theme_dark-line_red: rgb(89, 65, 65); - --theme_dark-text_code: rgba(255, 255, 255, 0.9); + --theme_dark-code_inline-text: #eb5757; + --theme_dark-code_inline-background: rgba(135, 131, 120, 0.15); + --theme_dark-code_text: rgba(255, 255, 255, 0.9); --theme_dark-code-background: rgb(63, 68, 71); --theme_dark-code_function: rgba(255, 255, 255, 0.9); --theme_dark-code_keyword: hsl(350, 40%, 70%); @@ -120,17 +131,11 @@ background: var(--theme_dark-sidebar) !important; } .notion-body.dark, -.notion-dark-theme [style*='background: rgb(47, 52, 55)'] { +.notion-dark-theme [style*='background: rgb(47, 52, 55)'], +.notion-dark-theme [style*='background-color: rgb(47, 52, 55)'] { background: var(--theme_dark-main) !important; } -.notion-dark-theme .notion-frame { - height: var(--theme_dark-main-height) !important; -} -.notion-light-theme .notion-frame { - height: var(--theme_light-main-height) !important; -} - .notion-peek-renderer > div:nth-child(2) { max-width: var(--theme_dark-preview-width) !important; } @@ -175,6 +180,14 @@ font-family: var(--theme_light-font_code) !important; } +/* prevent block hover options overlaying topbar */ +*:not([style*='z-index']) { + z-index: 1; +} +.notion-dark-theme .notion-topbar { + background: var(--theme_dark-main); +} + /** databases **/ .notion-dark-theme [style*='background: rgb(63, 68, 71)'] { @@ -184,41 +197,37 @@ border: 0.5px solid var(--theme_dark-card-border); } +.notion-dark-theme [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px'] { + box-shadow: var(--theme_dark-main) -3px 0px 0px !important; +} .notion-dark-theme [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px, rgba(255, 255, 255, 0.14) 0px 1px 0px'] { box-shadow: var(--theme_dark-main) -3px 0px 0px, var(--theme_dark-table-border) 0px 1px 0px !important; } -.notion-dark-theme [style*='border-top: 1px solid rgba(255, 255, 255, 0.14)'], -.notion-dark-theme [style*='border-top: 1px solid rgba(255, 255, 255, 0.07)'] { +.notion-dark-theme [style*='border-top: 1px solid rgba(255, 255, 255,'] { border-top: 1px solid var(--theme_dark-table-border) !important; } .notion-dark-theme [style*='box-shadow: rgba(255, 255, 255, 0.14) -1px 0px 0px'] { box-shadow: var(--theme_dark-table-border) -1px 0px 0px !important; } -.notion-dark-theme - [style*='border-bottom: 1px solid rgba(255, 255, 255, 0.14)'], -.notion-dark-theme - [style*='border-bottom: 1px solid rgba(255, 255, 255, 0.07)'] { +.notion-dark-theme [style*='border-bottom: 1px solid rgba(255, 255, 255,'] { border-bottom: 1px solid var(--theme_dark-table-border) !important; } .notion-dark-theme [style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px'] { box-shadow: var(--theme_dark-table-border) 0px 1px 0px !important; } -.notion-dark-theme [style*='border-right: 1px solid rgba(255, 255, 255, 0.14)'], -.notion-dark-theme - [style*='border-right: 1px solid rgba(255, 255, 255, 0.07)'] { +.notion-dark-theme [style*='border-right: 1px solid rgba(255, 255, 255,'] { border-right: 1px solid var(--theme_dark-table-border) !important; } .notion-dark-theme [style*='box-shadow: rgba(255, 255, 255, 0.07) 0px -1px 0px'] { box-shadow: var(--theme_dark-table-border) 0px -1px 0px !important; } -.notion-dark-theme [style*='border-left: 1px solid rgba(255, 255, 255, 0.14)'], -.notion-dark-theme [style*='border-left: 1px solid rgba(255, 255, 255, 0.07)'] { +.notion-dark-theme [style*='border-left: 1px solid rgba(255, 255, 255,'] { border-left: 1px solid var(--theme_dark-table-border) !important; } .notion-dark-theme @@ -233,7 +242,16 @@ box-shadow: 0 0 0 0.5px var(--theme_dark-button_hover-border); } -/* fix inline-tables in pages */ +.notion-calendar-view-day, +.DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end), +.DayPicker-Day.DayPicker-Day--start.DayPicker-Day--selected, +.DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day--outside:hover, +.DayPicker:not(.DayPicker--interactionDisabled) + .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end) { + transition: all 200ms ease !important; +} + +/* fix inline-tables in pages (?) */ .notion-page-content .notion-collection_view-block { width: 100% !important; } @@ -256,29 +274,68 @@ /** colours **/ -[style*='background: rgba(46, 170, 220, 0.2)'], -[style*='background-color: rgba(46, 170, 220, 0.2)'] { - background: var(--theme_dark-block-selected) !important; +.notion-dark-theme ::selection, +.notion-dark-theme [style*='background: rgba(46, 170, 220,'], +.notion-dark-theme [style*='background-color: rgba(46, 170, 220,'] { + background: var(--theme_dark-selected) !important; } -.notion-dark-theme .notion-page-content [style*='color: inherit;'], -.notion-dark-theme .notion-frame .notion-page-block { - color: var(--theme_dark-text) !important; -} - -.notion-dark-theme [style*='background: rgb(46, 170, 220)'] { +.notion-dark-theme [style*='background: rgb(46, 170, 220)'], +.notion-dark-theme [style*='background-color: rgb(46, 170, 220)'] { background: var(--theme_dark-primary) !important; } +.notion-dark-theme + [style*='box-shadow: rgb(46, 170, 220) 0px 0px 0px 2px inset'] { + box-shadow: var(--theme_dark-primary) 0px 0px 0px 2px inset !important; +} .notion-dark-theme [style*='background: rgb(6, 156, 205)'] { background: var(--theme_dark-primary_hover) !important; } .notion-dark-theme [style*='background: rgb(0, 141, 190)'] { background: var(--theme_dark-primary_click) !important; } +.notion-dark-theme + .DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end)::after, .notion-dark-theme [style*='background: rgb(235, 87, 87)'] { background: var(--theme_dark-primary_indicator) !important; } +.notion-dark-theme .notion-to_do-block .checkboxSquare path { + fill: var(--theme_dark-todo_empty-border) !important; +} +.notion-dark-theme .notion-to_do-block .check polygon { + fill: var(--theme_dark-todo_ticked-fill) !important; +} +.notion-dark-theme + .notion-to_do-block + [style*='background: rgb(46, 170, 220)'] { + background: var(--theme_dark-todo_ticked-background) !important; +} +.notion-to_do-block > div > div > div[style*='background:'] { + transition: background 200ms ease !important; +} +.notion-dark-theme .notion-to_do-block [style*='background: rgb(71, 76, 80)'] { + background: var(--theme_dark-todo_hover-background) !important; +} + +.notion-dark-theme + [style*='color: rgb(235, 87, 87); border: 1px solid rgba(235, 87, 87, 0.5);'] { + color: var(--theme_dark-danger_text) !important; + border: 1px solid var(--theme_dark-danger_border) !important; +} + +.notion-dark-theme, +.notion-dark-theme .notion-page-content [style*='color: inherit;'], +.notion-dark-theme .notion-frame .notion-page-block { + color: var(--theme_dark-text) !important; +} +.notion-dark-theme [style*='color: rgba(255, 255, 255, 0.6)'] { + color: var(--theme_dark-text_ui) !important; +} +.notion-dark-theme [style*='color: rgba(255, 255, 255, 0.4)'] { + color: var(--theme_dark-text_ui_dark) !important; +} + .notion-dark-theme [style*='color:rgba(151,154,155,0.95)'] { color: var(--theme_dark-text_gray) !important; } @@ -370,14 +427,24 @@ background: var(--theme_dark-line_red) !important; } +/* fix highlight padding: this isn't a typo */ +[style*='background:rgb('] { + padding-bottom: 3px !important; +} + /* code */ +.notion-dark-theme [style*='color:#EB5757'] { + color: var(--theme_dark-code_inline-text) !important; + background: var(--theme_dark-code_inline-background) !important; +} + .notion-dark-theme [style*='flex-grow: 1; border-radius: 3px; text-align: left; position: relative; background: rgb(63, 68, 71); min-width: 0px; width: 100%;'] { background: var(--theme_dark-code-background) !important; } .notion-dark-theme .notion-code-block > div { - color: var(--theme_dark-text_code) !important; + color: var(--theme_dark-code_text) !important; } .notion-dark-theme .notion-dark-theme .notion-code-block .token.function { color: var(--theme_dark-code_function) !important; diff --git a/mods/core/titlebar.css b/mods/core/titlebar.css index 83f5810..2296df4 100644 --- a/mods/core/titlebar.css +++ b/mods/core/titlebar.css @@ -2,6 +2,7 @@ * notion-enhancer * (c) 2020 dragonwocky * (c) 2020 TarasokUA + * (c) 2020 Arecsu * (https://dragonwocky.me/) under the MIT license */ @@ -93,3 +94,19 @@ background: var(--theme_light-button_hover); box-shadow: 0 0 0 0.5px var(--theme_light-button_hover-border); } + +/* hide topbar when sidebar is hidden */ +.notion-sidebar-container[style*='width: 0px;'] + .notion-frame { + height: calc( + 100% - (var(--configured-dragarea_height, 10px) + 45px) + ) !important; +} +.notion-sidebar-container[style*='width: 0px;'] + .notion-frame .notion-topbar { + opacity: 0 !important; + transition: opacity 200ms ease-in-out !important; +} +.notion-sidebar-container[style*='width: 0px;'] + + .notion-frame + .notion-topbar:hover { + opacity: 1 !important; +} diff --git a/pkg/loader.js b/pkg/loader.js index ece17b1..018926d 100644 --- a/pkg/loader.js +++ b/pkg/loader.js @@ -17,7 +17,9 @@ module.exports = function (__file, __exports) { .replace(/\\/g, '/'); const modules = { - source: fs.readdirSync(path.resolve(`${__dirname}/../mods`)), + source: fs + .readdirSync(path.resolve(`${__dirname}/../mods`)) + .filter((dir) => !dir.startsWith('.')), invalid: [], loaded: [], };