diff --git a/CHANGELOG.md b/CHANGELOG.md index 72b963d..924f74a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,7 @@ a flexibility update. normal "most recent" page). - new: css variables for increasing line spacing/paragraph margins. - new: patch the notion:// url scheme/protocol to work on linux. +- new: menu shows theme conflicts + a core mod option to auto-resolve theme conflicts. - improved: menu will now respect integrated titlebar setting. - improved: use keyup listeners instead of a globalShortcut for the enhancements menu toggle. - bugfix: removed messenger emoji set as the provider no longer supports it. @@ -41,22 +42,25 @@ a flexibility update. - bugfix: removed typo in variable name for brown text. - bugfix: primary-colour text (mainly in "add a \_" popups) is now properly themed. - bugfix: right-to-left extension applies to text in columns. +- bugfix: block text colour applies to text with backgrounds. +- bugfix: font applied to wrong mode with littlepig dark. - tweak: sticky table/list rows. - theme: "material ocean" = an oceanic colour palette. - theme: "dracula" = a theme based on the popular dracula color palette originally by zeno rocha and friends. - extension: "tabs" = have multiple notion pages open in a single window. +- extension: "scroll to top" = add an arrow above the help button to scroll back to the top of a page. a fork of notion-deb-builder that does generate an app.asar has been created and is once again supported. // todo -- new: menu shows theme conflicts. -- improved: default option for showing/hiding page properties. - bugfix: night shift working on macOS. - bugfix: windows are properly hidden/shown on macOS. -- extension: "tweaks" = common layout changes. -- update themes to new variables. +- extension: "tweaks" = common style/layout changes. +- new: a `-n` cli option. +- improved: overwrite `app.asar.bak` if already exists. +- improved: additionally menu item descriptions on hover. ### v0.9.1 (2020-09-26) diff --git a/mods/calendar-scroll/mod.js b/mods/calendar-scroll/mod.js index 0d2f2ff..13dcd89 100644 --- a/mods/calendar-scroll/mod.js +++ b/mods/calendar-scroll/mod.js @@ -14,7 +14,7 @@ module.exports = { name: 'calendar scroll', desc: 'add a button to scroll down to the current week in fullpage/infinite-scroll calendars.', - version: '0.1.0', + version: '0.1.1', author: 'dragonwocky', hacks: { 'renderer/preload.js'(store, __exports) { diff --git a/mods/calendar-scroll/styles.css b/mods/calendar-scroll/styles.css index ed41f12..9f6dfd7 100644 --- a/mods/calendar-scroll/styles.css +++ b/mods/calendar-scroll/styles.css @@ -13,6 +13,7 @@ border-radius: 3px; line-height: 1.2; padding: 0 0.5em; + margin-right: 5px; } #calendar-scroll-to-week:hover { background: transparent; diff --git a/mods/core/css/menu.css b/mods/core/css/menu.css index 1f36cf7..4e05425 100644 --- a/mods/core/css/menu.css +++ b/mods/core/css/menu.css @@ -181,7 +181,7 @@ s { text-decoration: underline; } -[data-relaunch] { +[data-action] { text-decoration: underline dotted; cursor: pointer; } @@ -621,12 +621,16 @@ s { } .reorder #search #tags > span, -.reorder #search #tags > span:hover { +.reorder #search #tags > span:hover, +.conflict #search #tags > span, +.conflict #search #tags > span:hover { opacity: 0.7; background: var(--theme--option-background); } .reorder #search #tags > .selected, -.reorder #search #tags > .selected:hover { +.reorder #search #tags > .selected:hover, +.conflict #search #tags > .selected, +.conflict #search #tags > .selected:hover { background: var(--tag_color, var(--theme--option_active-background)); } diff --git a/mods/core/css/theme.css b/mods/core/css/theme.css index dc1bb30..ad52e80 100644 --- a/mods/core/css/theme.css +++ b/mods/core/css/theme.css @@ -536,55 +536,89 @@ color: var(--theme--text_gray) !important; fill: var(--theme--text_gray) !important; } -.notion-body.dark [style*='background: rgba(151, 154, 155, 0.5)'], -.notion-body:not(.dark) [style*='background: rgba(140, 46, 0, 0.2)'] { - background: var(--theme--select_gray) !important; - color: var(--theme--select_gray-text) !important; -} .notion-body.dark [style*='background:rgb(69,75,78)'], .notion-body:not(.dark) [style*='background:rgb(235,236,237)'] { background: var(--theme--bg_gray) !important; color: var(--theme--bg_gray-text) !important; } +.notion-body.dark + [style*='color:rgba(151,154,155,0.95)'] + [style*='background:rgb(69,75,78)'], +.notion-body.dark + [style*='color: rgba(255, 255, 255, 0.6); fill: rgba(255, 255, 255, 0.6);'] + [style*='background:rgb(69,75,78)'], +.notion-body:not(.dark) + [style*='color:rgb(155,154,151)'] + [style*='background:rgb(235,236,237)'], +.notion-body:not(.dark) + [style*='color: rgba(55, 53, 47, 0.6); fill: rgba(55, 53, 47, 0.6);'] + [style*='background:rgb(235,236,237)'] { + background: var(--theme--bg_gray) !important; + color: var(--theme--text_gray) !important; + fill: var(--theme--text_gray) !important; +} .notion-body.dark [style*='background: rgb(69, 75, 78)'], .notion-body:not(.dark) [style*='background: rgb(235, 236, 237)'] { background: var(--theme--line_gray) !important; color: var(--theme--line_gray-text) !important; } +.notion-body.dark [style*='background: rgba(151, 154, 155, 0.5)'], +.notion-body:not(.dark) [style*='background: rgba(140, 46, 0, 0.2)'] { + background: var(--theme--select_gray) !important; + color: var(--theme--select_gray-text) !important; +} .notion-body.dark [style*='background: rgba(69, 75, 78, 0.3)'], .notion-body:not(.dark) [style*='background: rgba(235, 236, 237, 0.3)'] { background: var(--theme--callout_gray) !important; color: var(--theme--callout_gray-text) !important; } + .notion-body.dark [style*='color:rgb(147,114,100)'], .notion-body.dark [style*='color: rgb(147, 114, 100); fill: rgb(147, 114, 100);'], .notion-body:not(.dark) [style*='color:rgb(100,71,58)'], .notion-body:not(.dark) [style*='color: rgb(100, 71, 58); fill: rgb(100, 71, 58);'] { - fill: var(--theme--text_brown) !important; color: var(--theme--text_brown) !important; -} -.notion-body.dark [style*='background: rgba(147, 114, 100, 0.5)'], -.notion-body:not(.dark) [style*='background: rgba(140, 46, 0, 0.2)'] { - background: var(--theme--select_brown) !important; - color: var(--theme--select_brown-text) !important; + fill: var(--theme--text_brown) !important; } .notion-body.dark [style*='background:rgb(67,64,64)'], .notion-body:not(.dark) [style*='background:rgb(233,229,227)'] { background: var(--theme--bg_brown) !important; color: var(--theme--bg_brown-text) !important; } +.notion-body.dark + [style*='color:rgb(147,114,100)'] + [style*='background:rgb(67,64,64)'], +.notion-body.dark + [style*='color: rgb(147, 114, 100); fill: rgb(147, 114, 100);'] + [style*='background:rgb(67,64,64)'], +.notion-body:not(.dark) + [style*='color:rgb(100,71,58)'] + [style*='background:rgb(233,229,227)'], +.notion-body:not(.dark) + [style*='color: rgb(100, 71, 58); fill: rgb(100, 71, 58);'] + [style*='background:rgb(233,229,227)'] { + background: var(--theme--bg_brown) !important; + color: var(--theme--text_brown) !important; + fill: var(--theme--text_brown) !important; +} .notion-body.dark [style*='background: rgb(67, 64, 64)'], .notion-body:not(.dark) [style*='background: rgb(233, 229, 227)'] { background: var(--theme--line_brown) !important; color: var(--theme--line_brown-text) !important; } +.notion-body.dark [style*='background: rgba(147, 114, 100, 0.5)'], +.notion-body:not(.dark) [style*='background: rgba(140, 46, 0, 0.2)'] { + background: var(--theme--select_brown) !important; + color: var(--theme--select_brown-text) !important; +} .notion-body.dark [style*='background: rgba(67, 64, 64, 0.3)'], .notion-body:not(.dark) [style*='background: rgba(233, 229, 227, 0.3)'] { background: var(--theme--callout_brown) !important; color: var(--theme--callout_brown-text) !important; } + .notion-body.dark [style*='color:rgb(255,163,68)'], .notion-body.dark [style*='color: rgb(255, 163, 68); fill: rgb(255, 163, 68);'], .notion-body:not(.dark) [style*='color:rgb(217,115,13)'], @@ -593,26 +627,43 @@ color: var(--theme--text_orange) !important; fill: var(--theme--text_orange) !important; } -.notion-body.dark [style*='background: rgba(255, 163, 68, 0.5)'], -.notion-body:not(.dark) [style*='background: rgba(245, 93, 0, 0.2)'] { - background: var(--theme--select_orange) !important; - color: var(--theme--select_orange-text) !important; -} .notion-body.dark [style*='background:rgb(89,74,58)'], .notion-body:not(.dark) [style*='background:rgb(250,235,221)'] { background: var(--theme--bg_orange) !important; color: var(--theme--bg_orange-text) !important; } +.notion-body.dark + [style*='color:rgb(255,163,68)'] + [style*='background:rgb(89,74,58)'], +.notion-body.dark + [style*='color: rgb(255, 163, 68); fill: rgb(255, 163, 68);'] + [style*='background:rgb(89,74,58)'], +.notion-body:not(.dark) + [style*='color:rgb(217,115,13)'] + [style*='background:rgb(250,235,221)'], +.notion-body:not(.dark) + [style*='color: rgb(217, 115, 13); fill: rgb(217, 115, 13);'] + [style*='background:rgb(250,235,221)'] { + background: var(--theme--bg_orange) !important; + color: var(--theme--text_orange) !important; + fill: var(--theme--text_orange) !important; +} .notion-body.dark [style*='background: rgb(89, 74, 58)'], .notion-body:not(.dark) [style*='background: rgb(250, 235, 221)'] { background: var(--theme--line_orange) !important; color: var(--theme--line_orange-text) !important; } +.notion-body.dark [style*='background: rgba(255, 163, 68, 0.5)'], +.notion-body:not(.dark) [style*='background: rgba(245, 93, 0, 0.2)'] { + background: var(--theme--select_orange) !important; + color: var(--theme--select_orange-text) !important; +} .notion-body.dark [style*='background: rgba(89, 74, 58, 0.3)'], .notion-body:not(.dark) [style*='background: rgba(250, 235, 221, 0.3)'] { background: var(--theme--callout_orange) !important; color: var(--theme--callout_orange-text) !important; } + .notion-body.dark [style*='color:rgb(255,220,73)'], .notion-body.dark [style*='color: rgb(255, 220, 73); fill: rgb(255, 220, 73);'], .notion-body:not(.dark) [style*='color:rgb(223,171,1)'], @@ -621,26 +672,43 @@ color: var(--theme--text_yellow) !important; fill: var(--theme--text_yellow) !important; } -.notion-body.dark [style*='background: rgba(255, 220, 73, 0.5)'], -.notion-body:not(.dark) [style*='background: rgba(233, 168, 0, 0.2)'] { - background: var(--theme--select_yellow) !important; - color: var(--theme--select_yellow-text) !important; -} .notion-body.dark [style*='background:rgb(89,86,59)'], .notion-body:not(.dark) [style*='background:rgb(251,243,219)'] { background: var(--theme--bg_yellow) !important; color: var(--theme--bg_yellow-text) !important; } +.notion-body.dark + [style*='color:rgb(255,220,73)'] + [style*='background:rgb(89,86,59)'], +.notion-body.dark + [style*='color: rgb(255, 220, 73); fill: rgb(255, 220, 73);'] + [style*='background:rgb(89,86,59)'], +.notion-body:not(.dark) + [style*='color:rgb(223,171,1)'] + [style*='background:rgb(251,243,219)'], +.notion-body:not(.dark) + [style*='color: rgb(223, 171, 1); fill: rgb(223, 171, 1);'] + [style*='background:rgb(251,243,219)'] { + background: var(--theme--bg_yellow) !important; + color: var(--theme--text_yellow) !important; + fill: var(--theme--text_yellow) !important; +} .notion-body.dark [style*='background: rgb(89, 86, 59)'], .notion-body:not(.dark) [style*='background: rgb(251, 243, 219)'] { background: var(--theme--line_yellow) !important; color: var(--theme--line_yellow-text) !important; } +.notion-body.dark [style*='background: rgba(255, 220, 73, 0.5)'], +.notion-body:not(.dark) [style*='background: rgba(233, 168, 0, 0.2)'] { + background: var(--theme--select_yellow) !important; + color: var(--theme--select_yellow-text) !important; +} .notion-body.dark [style*='background: rgba(89, 86, 59, 0.3)'], .notion-body:not(.dark) [style*='background: rgba(251, 243, 219, 0.3)'] { background: var(--theme--callout_yellow) !important; color: var(--theme--callout_yellow-text) !important; } + .notion-body.dark [style*='color:rgb(77,171,154)'], .notion-body.dark [style*='color: rgb(77, 171, 154); fill: rgb(77, 171, 154);'], .notion-body:not(.dark) [style*='color:rgb(15,123,108)'], @@ -649,26 +717,43 @@ color: var(--theme--text_green) !important; fill: var(--theme--text_green) !important; } -.notion-body.dark [style*='background: rgba(77, 171, 154, 0.5)'], -.notion-body:not(.dark) [style*='background: rgba(0, 135, 107, 0.2)'] { - background: var(--theme--select_green) !important; - color: var(--theme--select_green-text) !important; -} .notion-body.dark [style*='background:rgb(53,76,75)'], .notion-body:not(.dark) [style*='background:rgb(221,237,234)'] { background: var(--theme--bg_green) !important; color: var(--theme--bg_green-text) !important; } +.notion-body.dark + [style*='color:rgb(77,171,154)'] + [style*='background:rgb(53,76,75)'], +.notion-body.dark + [style*='color: rgb(77, 171, 154); fill: rgb(77, 171, 154);'] + [style*='background:rgb(53,76,75)'], +.notion-body:not(.dark) + [style*='color:rgb(15,123,108)'] + [style*='background:rgb(221,237,234)'], +.notion-body:not(.dark) + [style*='color: rgb(15, 123, 108); fill: rgb(15, 123, 108);'] + [style*='background:rgb(221,237,234)'] { + background: var(--theme--bg_green) !important; + color: var(--theme--text_green) !important; + fill: var(--theme--text_green) !important; +} .notion-body.dark [style*='background: rgb(53, 76, 75)'], .notion-body:not(.dark) [style*='background: rgb(221, 237, 234)'] { background: var(--theme--line_green) !important; color: var(--theme--line_green-text) !important; } +.notion-body.dark [style*='background: rgba(77, 171, 154, 0.5)'], +.notion-body:not(.dark) [style*='background: rgba(0, 135, 107, 0.2)'] { + background: var(--theme--select_green) !important; + color: var(--theme--select_green-text) !important; +} .notion-body.dark [style*='background: rgba(53, 76, 75, 0.3)'], .notion-body:not(.dark) [style*='background: rgba(221, 237, 234, 0.3)'] { background: var(--theme--callout_green) !important; color: var(--theme--callout_green-text) !important; } + .notion-body.dark [style*='color:rgb(82,156,202)'], .notion-body.dark [style*='color: rgb(82, 156, 202); fill: rgb(82, 156, 202);'], .notion-body:not(.dark) [style*='color:rgb(11,110,153)'], @@ -677,26 +762,43 @@ color: var(--theme--text_blue) !important; fill: var(--theme--text_blue) !important; } -.notion-body.dark [style*='background: rgba(82, 156, 202, 0.5)'], -.notion-body:not(.dark) [style*='background: rgba(0, 120, 223, 0.2)'] { - background: var(--theme--select_blue) !important; - color: var(--theme--select_blue-text) !important; -} .notion-body.dark [style*='background:rgb(54,73,84)'], .notion-body:not(.dark) [style*='background:rgb(221,235,241)'] { background: var(--theme--bg_blue) !important; color: var(--theme--bg_blue-text) !important; } +.notion-body.dark + [style*='color:rgb(82,156,202)'] + [style*='background:rgb(54,73,84)'], +.notion-body.dark + [style*='color: rgb(82, 156, 202); fill: rgb(82, 156, 202);'] + [style*='background:rgb(54,73,84)'], +.notion-body:not(.dark) + [style*='color:rgb(11,110,153)'] + [style*='background:rgb(221,235,241)'], +.notion-body:not(.dark) + [style*='color: rgb(11, 110, 153); fill: rgb(11, 110, 153);'] + [style*='background:rgb(221,235,241)'] { + background: var(--theme--bg_blue) !important; + color: var(--theme--text_blue) !important; + fill: var(--theme--text_blue) !important; +} .notion-body.dark [style*='background: rgb(54, 73, 84)'], .notion-body:not(.dark) [style*='background: rgb(221, 235, 241)'] { background: var(--theme--line_blue) !important; color: var(--theme--line_blue-text) !important; } +.notion-body.dark [style*='background: rgba(82, 156, 202, 0.5)'], +.notion-body:not(.dark) [style*='background: rgba(0, 120, 223, 0.2)'] { + background: var(--theme--select_blue) !important; + color: var(--theme--select_blue-text) !important; +} .notion-body.dark [style*='background: rgba(54, 73, 84, 0.3)'], .notion-body:not(.dark) [style*='background: rgba(221, 235, 241, 0.3)'] { background: var(--theme--callout_blue) !important; color: var(--theme--callout_blue-text) !important; } + .notion-body.dark [style*='color:rgb(154,109,215)'], .notion-body.dark [style*='color: rgb(154, 109, 215); fill: rgb(154, 109, 215);'], @@ -706,26 +808,43 @@ color: var(--theme--text_purple) !important; fill: var(--theme--text_purple) !important; } -.notion-body.dark [style*='background: rgba(154, 109, 215, 0.5)'], -.notion-body:not(.dark) [style*='background: rgba(103, 36, 222, 0.2)'] { - background: var(--theme--select_purple) !important; - color: var(--theme--select_purple-text) !important; -} .notion-body.dark [style*='background:rgb(68,63,87)'], .notion-body:not(.dark) [style*='background:rgb(234,228,242)'] { background: var(--theme--bg_purple) !important; color: var(--theme--bg_purple-text) !important; } +.notion-body.dark + [style*='color:rgb(154,109,215)'] + [style*='background:rgb(68,63,87)'], +.notion-body.dark + [style*='color: rgb(154, 109, 215); fill: rgb(154, 109, 215);'] + [style*='background:rgb(68,63,87)'], +.notion-body:not(.dark) + [style*='color:rgb(105,64,165)'] + [style*='background:rgb(234,228,242)'], +.notion-body:not(.dark) + [style*='color: rgb(105, 64, 165); fill: rgb(105, 64, 165);'] + [style*='background:rgb(234,228,242)'] { + background: var(--theme--bg_purple) !important; + color: var(--theme--text_purple) !important; + fill: var(--theme--text_purple) !important; +} .notion-body.dark [style*='background: rgb(68, 63, 87)'], .notion-body:not(.dark) [style*='background: rgb(234, 228, 242)'] { background: var(--theme--line_purple) !important; color: var(--theme--line_purple-text) !important; } +.notion-body.dark [style*='background: rgba(154, 109, 215, 0.5)'], +.notion-body:not(.dark) [style*='background: rgba(103, 36, 222, 0.2)'] { + background: var(--theme--select_purple) !important; + color: var(--theme--select_purple-text) !important; +} .notion-body.dark [style*='background: rgba(68, 63, 87, 0.3)'], .notion-body:not(.dark) [style*='background: rgba(234, 228, 242, 0.3)'] { background: var(--theme--callout_purple) !important; color: var(--theme--callout_purple-text) !important; } + .notion-body.dark [style*='color:rgb(226,85,161)'], .notion-body.dark [style*='color: rgb(226, 85, 161); fill: rgb(226, 85, 161);'], .notion-body:not(.dark) [style*='color:rgb(173,26,114)'], @@ -734,26 +853,43 @@ color: var(--theme--text_pink) !important; fill: var(--theme--text_pink) !important; } -.notion-body.dark [style*='background: rgba(226, 85, 161, 0.5)'], -.notion-body:not(.dark) [style*='background: rgba(221, 0, 129, 0.2)'] { - background: var(--theme--select_pink) !important; - color: var(--theme--select_pink-text) !important; -} .notion-body.dark [style*='background:rgb(83,59,76)'], .notion-body:not(.dark) [style*='background:rgb(244,223,235)'] { background: var(--theme--bg_pink) !important; color: var(--theme--bg_pink-text) !important; } +.notion-body.dark + [style*='color:rgb(226,85,161)'] + [style*='background:rgb(83,59,76)'], +.notion-body.dark + [style*='color: rgb(226, 85, 161); fill: rgb(226, 85, 161);'] + [style*='background:rgb(83,59,76)'], +.notion-body:not(.dark) + [style*='color:rgb(173,26,114)'] + [style*='background:rgb(244,223,235)'], +.notion-body:not(.dark) + [style*='color: rgb(173, 26, 114); fill: rgb(173, 26, 114);'] + [style*='background:rgb(244,223,235)'] { + background: var(--theme--bg_pink) !important; + color: var(--theme--text_pink) !important; + fill: var(--theme--text_pink) !important; +} .notion-body.dark [style*='background: rgb(83, 59, 76)'], .notion-body:not(.dark) [style*='background: rgb(244, 223, 235)'] { background: var(--theme--line_pink) !important; color: var(--theme--line_pink-text) !important; } +.notion-body.dark [style*='background: rgba(226, 85, 161, 0.5)'], +.notion-body:not(.dark) [style*='background: rgba(221, 0, 129, 0.2)'] { + background: var(--theme--select_pink) !important; + color: var(--theme--select_pink-text) !important; +} .notion-body.dark [style*='background: rgba(83, 59, 76, 0.3)'], .notion-body:not(.dark) [style*='background: rgba(244, 223, 235, 0.3)'] { background: var(--theme--callout_pink) !important; color: var(--theme--callout_pink-text) !important; } + .notion-body.dark [style*='color:rgb(255,115,105)'], .notion-body.dark [style*='color: rgb(255, 115, 105); fill: rgb(255, 115, 105);'], @@ -763,21 +899,37 @@ color: var(--theme--text_red) !important; fill: var(--theme--text_red) !important; } -.notion-body.dark [style*='background: rgba(255, 115, 105, 0.5);'], -.notion-body:not(.dark) [style*='background: rgba(255, 0, 26, 0.2)'] { - background: var(--theme--select_red) !important; - color: var(--theme--select_red-text) !important; -} .notion-body.dark [style*='background:rgb(89,65,65)'], .notion-body:not(.dark) [style*='background:rgb(251,228,228)'] { background: var(--theme--bg_red) !important; color: var(--theme--bg_red-text) !important; } +.notion-body.dark + [style*='color:rgb(255,115,105)'] + [style*='background:rgb(89,65,65)'], +.notion-body.dark + [style*='color: rgb(255, 115, 105); fill: rgb(255, 115, 105);'] + [style*='background:rgb(89,65,65)'], +.notion-body:not(.dark) + [style*='color:rgb(224,62,62)'] + [style*='background:rgb(251,228,228)'], +.notion-body:not(.dark) + [style*='color: rgb(224, 62, 62); fill: rgb(224, 62, 62);'] + [style*='background:rgb(251,228,228)'] { + background: var(--theme--bg_red) !important; + color: var(--theme--text_red) !important; + fill: var(--theme--text_red) !important; +} .notion-body.dark [style*='background: rgb(89, 65, 65)'], .notion-body:not(.dark) [style*='background: rgb(251, 228, 228)'] { background: var(--theme--line_red) !important; color: var(--theme--line_red-text) !important; } +.notion-body.dark [style*='background: rgba(255, 115, 105, 0.5);'], +.notion-body:not(.dark) [style*='background: rgba(255, 0, 26, 0.2)'] { + background: var(--theme--select_red) !important; + color: var(--theme--select_red-text) !important; +} .notion-body.dark [style*='background: rgba(89, 65, 65, 0.3)'], .notion-body:not(.dark) [style*='background: rgba(251, 228, 228, 0.3)'] { background: var(--theme--callout_red) !important; diff --git a/mods/core/css/variables.css b/mods/core/css/variables.css index b23f538..69d7b00 100644 --- a/mods/core/css/variables.css +++ b/mods/core/css/variables.css @@ -45,7 +45,7 @@ --theme_dark--font_body-size_small: 14px; --theme_dark--font_code-size: 0.796875em; --theme_dark--font_sidebar-size: 14px; - + --theme_dark--text-block_line-height: 1.5; --theme_dark--text-block_margin-top: 1px; @@ -93,26 +93,6 @@ --theme_dark--text_pink: rgb(226, 85, 161); --theme_dark--text_red: rgb(255, 115, 105); - --theme_dark--select-text: var(--theme_dark--text); - --theme_dark--select_gray: rgba(151, 154, 155, 0.5); - --theme_dark--select_gray-text: var(--theme_dark--select-text); - --theme_dark--select_brown: rgba(147, 114, 100, 0.5); - --theme_dark--select_brown-text: var(--theme_dark--select-text); - --theme_dark--select_orange: rgba(255, 163, 68, 0.5); - --theme_dark--select_orange-text: var(--theme_dark--select-text); - --theme_dark--select_yellow: rgba(255, 220, 73, 0.5); - --theme_dark--select_yellow-text: var(--theme_dark--select-text); - --theme_dark--select_green: rgba(77, 171, 154, 0.5); - --theme_dark--select_green-text: var(--theme_dark--select-text); - --theme_dark--select_blue: rgba(82, 156, 202, 0.5); - --theme_dark--select_blue-text: var(--theme_dark--select-text); - --theme_dark--select_purple: rgba(154, 109, 215, 0.5); - --theme_dark--select_purple-text: var(--theme_dark--select-text); - --theme_dark--select_pink: rgba(226, 85, 161, 0.5); - --theme_dark--select_pink-text: var(--theme_dark--select-text); - --theme_dark--select_red: rgba(255, 115, 105, 0.5); - --theme_dark--select_red-text: var(--theme_dark--select-text); - --theme_dark--bg-text: var(--theme_dark--text); --theme_dark--bg_gray: rgb(69, 75, 78); --theme_dark--bg_gray-text: var(--theme_dark--bg-text); @@ -153,6 +133,26 @@ --theme_dark--line_red: rgb(89, 65, 65); --theme_dark--line_red-text: var(--theme_dark--line-text); + --theme_dark--select-text: var(--theme_dark--text); + --theme_dark--select_gray: rgba(151, 154, 155, 0.5); + --theme_dark--select_gray-text: var(--theme_dark--select-text); + --theme_dark--select_brown: rgba(147, 114, 100, 0.5); + --theme_dark--select_brown-text: var(--theme_dark--select-text); + --theme_dark--select_orange: rgba(255, 163, 68, 0.5); + --theme_dark--select_orange-text: var(--theme_dark--select-text); + --theme_dark--select_yellow: rgba(255, 220, 73, 0.5); + --theme_dark--select_yellow-text: var(--theme_dark--select-text); + --theme_dark--select_green: rgba(77, 171, 154, 0.5); + --theme_dark--select_green-text: var(--theme_dark--select-text); + --theme_dark--select_blue: rgba(82, 156, 202, 0.5); + --theme_dark--select_blue-text: var(--theme_dark--select-text); + --theme_dark--select_purple: rgba(154, 109, 215, 0.5); + --theme_dark--select_purple-text: var(--theme_dark--select-text); + --theme_dark--select_pink: rgba(226, 85, 161, 0.5); + --theme_dark--select_pink-text: var(--theme_dark--select-text); + --theme_dark--select_red: rgba(255, 115, 105, 0.5); + --theme_dark--select_red-text: var(--theme_dark--select-text); + --theme_dark--callout-text: var(--theme_dark--text); --theme_dark--callout_gray: rgba(69, 75, 78, 0.3); --theme_dark--callout_gray-text: var(--theme_dark--callout-text); @@ -229,7 +229,7 @@ --theme_light--font_body-size_small: 14px; --theme_light--font_code-size: 0.796875em; --theme_light--font_sidebar-size: 14px; - + --theme_light--text-block_line-height: 1.5; --theme_light--text-block_margin-top: 1px; @@ -278,26 +278,6 @@ --theme_light--text_pink: rgb(173, 26, 114); --theme_light--text_red: rgb(224, 62, 62); - --theme_light--select-text: var(--theme_light--text); - --theme_light--select_gray: rgba(140, 46, 0, 0.2); - --theme_light--select_gray-text: var(--theme_light--select-text); - --theme_light--select_brown: rgba(140, 46, 0, 0.2); - --theme_light--select_brown-text: var(--theme_light--select-text); - --theme_light--select_orange: rgba(245, 93, 0, 0.2); - --theme_light--select_orange-text: var(--theme_light--select-text); - --theme_light--select_yellow: rgba(233, 168, 0, 0.2); - --theme_light--select_yellow-text: var(--theme_light--select-text); - --theme_light--select_green: rgba(0, 135, 107, 0.2); - --theme_light--select_green-text: var(--theme_light--select-text); - --theme_light--select_blue: rgba(0, 120, 223, 0.2); - --theme_light--select_blue-text: var(--theme_light--select-text); - --theme_light--select_purple: rgba(103, 36, 222, 0.2); - --theme_light--select_purple-text: var(--theme_light--select-text); - --theme_light--select_pink: rgba(221, 0, 129, 0.2); - --theme_light--select_pink-text: var(--theme_light--select-text); - --theme_light--select_red: rgba(255, 0, 26, 0.2); - --theme_light--select_red-text: var(--theme_light--select-text); - --theme_light--bg-text: var(--theme_light--text); --theme_light--bg_gray: rgb(235, 236, 237); --theme_light--bg_gray-text: var(--theme_light--bg-text); @@ -338,6 +318,26 @@ --theme_light--line_red: rgb(251, 228, 228); --theme_light--line_red-text: var(--theme_light--line-text); + --theme_light--select-text: var(--theme_light--text); + --theme_light--select_gray: rgba(140, 46, 0, 0.2); + --theme_light--select_gray-text: var(--theme_light--select-text); + --theme_light--select_brown: rgba(140, 46, 0, 0.2); + --theme_light--select_brown-text: var(--theme_light--select-text); + --theme_light--select_orange: rgba(245, 93, 0, 0.2); + --theme_light--select_orange-text: var(--theme_light--select-text); + --theme_light--select_yellow: rgba(233, 168, 0, 0.2); + --theme_light--select_yellow-text: var(--theme_light--select-text); + --theme_light--select_green: rgba(0, 135, 107, 0.2); + --theme_light--select_green-text: var(--theme_light--select-text); + --theme_light--select_blue: rgba(0, 120, 223, 0.2); + --theme_light--select_blue-text: var(--theme_light--select-text); + --theme_light--select_purple: rgba(103, 36, 222, 0.2); + --theme_light--select_purple-text: var(--theme_light--select-text); + --theme_light--select_pink: rgba(221, 0, 129, 0.2); + --theme_light--select_pink-text: var(--theme_light--select-text); + --theme_light--select_red: rgba(255, 0, 26, 0.2); + --theme_light--select_red-text: var(--theme_light--select-text); + --theme_light--callout-text: var(--theme_light--text); --theme_light--callout_gray: rgba(235, 236, 237, 0.3); --theme_light--callout_gray-text: var(--theme_light--callout-text); @@ -449,24 +449,6 @@ --theme--text_pink: var(--theme_dark--text_pink); --theme--text_red: var(--theme_dark--text_red); --theme--select-text: var(--theme_dark--select-text); - --theme--select_gray: var(--theme_dark--select_gray); - --theme--select_gray-text: var(--theme_dark--select_gray-text); - --theme--select_brown: var(--theme_dark--select_brown); - --theme--select_brown-text: var(--theme_dark--select_brown-text); - --theme--select_orange: var(--theme_dark--select_orange); - --theme--select_orange-text: var(--theme_dark--select_orange-text); - --theme--select_yellow: var(--theme_dark--select_yellow); - --theme--select_yellow-text: var(--theme_dark--select_yellow-text); - --theme--select_green: var(--theme_dark--select_green); - --theme--select_green-text: var(--theme_dark--select_green-text); - --theme--select_blue: var(--theme_dark--select_blue); - --theme--select_blue-text: var(--theme_dark--select_blue-text); - --theme--select_purple: var(--theme_dark--select_purple); - --theme--select_purple-text: var(--theme_dark--select_purple-text); - --theme--select_pink: var(--theme_dark--select_pink); - --theme--select_pink-text: var(--theme_dark--select_pink-text); - --theme--select_red: var(--theme_dark--select_red); - --theme--select_red-text: var(--theme_dark--select_red-text); --theme--bg-text: var(--theme_dark--bg-text); --theme--bg_gray: var(--theme_dark--bg_gray); --theme--bg_gray-text: var(--theme_dark--bg_gray-text); @@ -505,6 +487,24 @@ --theme--line_pink-text: var(--theme_dark--line_pink-text); --theme--line_red: var(--theme_dark--line_red); --theme--line_red-text: var(--theme_dark--line_red-text); + --theme--select_gray: var(--theme_dark--select_gray); + --theme--select_gray-text: var(--theme_dark--select_gray-text); + --theme--select_brown: var(--theme_dark--select_brown); + --theme--select_brown-text: var(--theme_dark--select_brown-text); + --theme--select_orange: var(--theme_dark--select_orange); + --theme--select_orange-text: var(--theme_dark--select_orange-text); + --theme--select_yellow: var(--theme_dark--select_yellow); + --theme--select_yellow-text: var(--theme_dark--select_yellow-text); + --theme--select_green: var(--theme_dark--select_green); + --theme--select_green-text: var(--theme_dark--select_green-text); + --theme--select_blue: var(--theme_dark--select_blue); + --theme--select_blue-text: var(--theme_dark--select_blue-text); + --theme--select_purple: var(--theme_dark--select_purple); + --theme--select_purple-text: var(--theme_dark--select_purple-text); + --theme--select_pink: var(--theme_dark--select_pink); + --theme--select_pink-text: var(--theme_dark--select_pink-text); + --theme--select_red: var(--theme_dark--select_red); + --theme--select_red-text: var(--theme_dark--select_red-text); --theme--callout-text: var(--theme_dark--callout-text); --theme--callout_gray: var(--theme_dark--callout_gray); --theme--callout_gray-text: var(--theme_dark--callout_gray-text); @@ -615,24 +615,6 @@ --theme--text_pink: var(--theme_light--text_pink); --theme--text_red: var(--theme_light--text_red); --theme--select-text: var(--theme_light--select-text); - --theme--select_gray: var(--theme_light--select_gray); - --theme--select_gray-text: var(--theme_light--select_gray-text); - --theme--select_brown: var(--theme_light--select_brown); - --theme--select_brown-text: var(--theme_light--select_brown-text); - --theme--select_orange: var(--theme_light--select_orange); - --theme--select_orange-text: var(--theme_light--select_orange-text); - --theme--select_yellow: var(--theme_light--select_yellow); - --theme--select_yellow-text: var(--theme_light--select_yellow-text); - --theme--select_green: var(--theme_light--select_green); - --theme--select_green-text: var(--theme_light--select_green-text); - --theme--select_blue: var(--theme_light--select_blue); - --theme--select_blue-text: var(--theme_light--select_blue-text); - --theme--select_purple: var(--theme_light--select_purple); - --theme--select_purple-text: var(--theme_light--select_purple-text); - --theme--select_pink: var(--theme_light--select_pink); - --theme--select_pink-text: var(--theme_light--select_pink-text); - --theme--select_red: var(--theme_light--select_red); - --theme--select_red-text: var(--theme_light--select_red-text); --theme--bg-text: var(--theme_light--bg-text); --theme--bg_gray: var(--theme_light--bg_gray); --theme--bg_gray-text: var(--theme_light--bg_gray-text); @@ -671,6 +653,24 @@ --theme--line_pink-text: var(--theme_light--line_pink-text); --theme--line_red: var(--theme_light--line_red); --theme--line_red-text: var(--theme_light--line_red-text); + --theme--select_gray: var(--theme_light--select_gray); + --theme--select_gray-text: var(--theme_light--select_gray-text); + --theme--select_brown: var(--theme_light--select_brown); + --theme--select_brown-text: var(--theme_light--select_brown-text); + --theme--select_orange: var(--theme_light--select_orange); + --theme--select_orange-text: var(--theme_light--select_orange-text); + --theme--select_yellow: var(--theme_light--select_yellow); + --theme--select_yellow-text: var(--theme_light--select_yellow-text); + --theme--select_green: var(--theme_light--select_green); + --theme--select_green-text: var(--theme_light--select_green-text); + --theme--select_blue: var(--theme_light--select_blue); + --theme--select_blue-text: var(--theme_light--select_blue-text); + --theme--select_purple: var(--theme_light--select_purple); + --theme--select_purple-text: var(--theme_light--select_purple-text); + --theme--select_pink: var(--theme_light--select_pink); + --theme--select_pink-text: var(--theme_light--select_pink-text); + --theme--select_red: var(--theme_light--select_red); + --theme--select_red-text: var(--theme_light--select_red-text); --theme--callout-text: var(--theme_light--callout-text); --theme--callout_gray: var(--theme_light--callout_gray); --theme--callout_gray-text: var(--theme_light--callout_gray-text); diff --git a/mods/core/enhancerMenu.js b/mods/core/enhancerMenu.js index cdea17f..aacb52e 100644 --- a/mods/core/enhancerMenu.js +++ b/mods/core/enhancerMenu.js @@ -185,7 +185,78 @@ window['__start'] = async () => { }) ); - // search + const conflicts = { + relaunch: null, + detected: () => + store('mods', { + conflicts: { dark: false, light: false }, + }).conflicts, + alerts: [], + check() { + document.body.classList.remove('conflict'); + conflicts.alerts.forEach((alert) => alert.resolve()); + conflicts.alerts = []; + const enabled = modules.loaded.filter( + (mod) => + store('mods', { [mod.id]: { enabled: false } })[mod.id].enabled && + mod.tags.includes('theme') + ), + dark = enabled.filter((mod) => mod.tags.includes('dark')), + light = enabled.filter((mod) => mod.tags.includes('light')); + for (let mode of [ + [dark, 'dark'], + [light, 'light'], + ]) { + const conflictID = mode[0] + .map((mod) => mod.id) + .sort() + .join('||'); + if ( + conflicts.detected()[mode[1]] && + conflicts.detected()[mode[1]][0] === conflictID && + conflicts.detected()[mode[1]][1] + ) + continue; + if (mode[0].length > 1) { + document.body.classList.add('conflict'); + conflicts.detected()[mode[1]] = [conflictID, false]; + const alert = createAlert( + 'error', + `conflicting ${mode[1]} themes: ${mode[0] + .map((mod) => `${mod.name}`) + .join( + ', ' + )}.
resolve or dismiss to continue.` + ); + alert.el + .querySelector('[data-action="dismiss"]') + .addEventListener('click', (event) => { + conflicts.detected()[mode[1]] = [conflictID, true]; + conflicts.check(); + }); + alert.append(); + conflicts.alerts.push(alert); + } else conflicts.detected()[mode[1]] = false; + } + search(); + }, + }; + function modified() { + conflicts.check(); + if (conflicts.relaunch) return; + conflicts.relaunch = createAlert( + 'info', + 'changes may not fully apply until app relaunch.' + ); + conflicts.relaunch.el + .querySelector('[data-action="relaunch"]') + .addEventListener('click', (event) => { + electron.remote.app.relaunch(); + electron.remote.app.quit(); + }); + conflicts.relaunch.append(); + } + const search_filters = { enabled: true, disabled: true, @@ -209,17 +280,30 @@ window['__start'] = async () => { } function search() { modules.loaded.forEach((mod) => { - const $search_input = document.querySelector('#search > input'); + const $search_input = document.querySelector('#search > input'), + conflictingIDs = [conflicts.detected().dark, conflicts.detected().light] + .filter((conflict) => conflict && !conflict[1]) + .map(([mods, dismissed]) => mods.split('||')) + .flat(); + if ( + conflictingIDs.length || + document.body.classList.contains('reorder') + ) { + $search_input.disabled = true; + } else $search_input.disabled = false; if ( !document.body.classList.contains('reorder') && - ((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 && - !innerText(mod.elem) - .toLowerCase() - .includes($search_input.value.toLowerCase().trim()))) + (conflictingIDs.length + ? !conflictingIDs.some((id) => id.includes(mod.id)) + : (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 && + !innerText(mod.elem) + .toLowerCase() + .includes($search_input.value.toLowerCase().trim()))) ) return (mod.elem.style.display = 'none'); mod.elem.style.display = 'block'; @@ -239,7 +323,10 @@ window['__start'] = async () => { ); document.querySelector('#tags').append(el); el.addEventListener('click', (event) => { - if (!document.body.classList.contains('reorder')) { + if ( + !document.body.classList.contains('reorder') && + !document.body.classList.contains('conflict') + ) { el.className = el.className === 'selected' ? '' : 'selected'; onclick(el.className === 'selected'); } @@ -299,22 +386,6 @@ window['__start'] = async () => { return parsed; } - let $modified_notice; - function modified() { - if ($modified_notice) return; - $modified_notice = createAlert( - 'info', - `changes may not fully apply until app relaunch.` - ); - $modified_notice.el - .querySelector('[data-relaunch]') - .addEventListener('click', (event) => { - electron.remote.app.relaunch(); - electron.remote.app.quit(); - }); - $modified_notice.append(); - } - const file_icon = await fs.readFile( path.resolve(`${__dirname}/icons/file.svg`) ); @@ -406,11 +477,11 @@ window['__start'] = async () => { const $modules = document.querySelector('#modules'); for (let mod of modules.loaded) { - for (let fonts of mod.fonts || []) { + for (let font of mod.fonts || []) { document .querySelector('head') .appendChild( - helpers.createElement(``) + helpers.createElement(``) ); } @@ -471,6 +542,27 @@ window['__start'] = async () => { ].enabled ? 'enabled' : 'disabled'; + if ( + $enable.checked && + coreStore().autoresolve && + mod.tags.includes('theme') + ) { + modules.loaded.forEach((other) => { + const $other_enable = other.elem.querySelector( + `#enable_${other.id}` + ); + if ( + other !== mod && + $other_enable && + $other_enable.checked && + other.tags.includes('theme') + ) { + for (let mode of ['dark', 'light']) + if (other.tags.includes(mode) && mod.tags.includes(mode)) + $other_enable.click(); + } + }); + } search(); modified(); }); @@ -519,6 +611,7 @@ window['__start'] = async () => { .forEach((checkbox) => checkbox.addEventListener('click', (event) => event.target.blur()) ); + conflicts.check(); // draggable re-ordering const draggable = { diff --git a/mods/core/mod.js b/mods/core/mod.js index 1d3bd3f..869160e 100644 --- a/mods/core/mod.js +++ b/mods/core/mod.js @@ -14,6 +14,12 @@ module.exports = { version: require('../../package.json').version, author: 'dragonwocky', options: [ + { + key: 'autoresolve', + label: 'auto-resolve theme conflicts', + type: 'toggle', + value: false, + }, { key: 'openhidden', label: 'hide app on open', diff --git a/mods/core/render.js b/mods/core/render.js index c2e731e..30bdc25 100644 --- a/mods/core/render.js +++ b/mods/core/render.js @@ -9,7 +9,11 @@ const url = require('url'), path = require('path'), electron = require('electron'), - { __notion } = require('../../pkg/helpers.js'), + { + __notion, + getEnhancements, + createElement, + } = require('../../pkg/helpers.js'), config = require(`${__notion}/app/config.js`), constants = require(`${__notion}/app/shared/constants.js`), notion_intl = require(`${__notion}/app/shared/notion-intl/index.js`), @@ -968,6 +972,16 @@ module.exports = (store, __exports) => { window['__start'] = () => { document.head.innerHTML += ``; + const modules = getEnhancements(); + for (let mod of modules.loaded) { + for (let font of mod.fonts || []) { + document + .querySelector('head') + .appendChild( + createElement(``) + ); + } + } // open menu on hotkey toggle document.addEventListener('keyup', (event) => { diff --git a/mods/core/tray.js b/mods/core/tray.js index 59e292a..9e832a1 100644 --- a/mods/core/tray.js +++ b/mods/core/tray.js @@ -32,9 +32,7 @@ module.exports = (store, __exports) => { // menu - electron.ipcMain.on('enhancer:open-menu', (event, arg) => { - openEnhancerMenu(); - }); + electron.ipcMain.on('enhancer:open-menu', openEnhancerMenu); electron.ipcMain.on('enhancer:set-menu-theme', (event, arg) => { if (!enhancer_menu) return; enhancer_menu.webContents.send('enhancer:set-menu-theme', arg); diff --git a/mods/dark+/mod.js b/mods/dark+/mod.js index 3fbd819..981a1c7 100644 --- a/mods/dark+/mod.js +++ b/mods/dark+/mod.js @@ -11,7 +11,7 @@ module.exports = { tags: ['theme', 'dark'], name: 'dark+', desc: 'a vivid-colour near-black theme.', - version: '0.1.5', + version: '0.1.6', author: 'dragonwocky', options: [ { diff --git a/mods/dark+/styles.css b/mods/dark+/styles.css index 5308330..4ed9764 100644 --- a/mods/dark+/styles.css +++ b/mods/dark+/styles.css @@ -8,14 +8,17 @@ --theme_dark--main: rgb(5, 5, 5); --theme_dark--sidebar: rgb(1, 1, 1); --theme_dark--dragarea: #000; + --theme_dark--box-shadow_strong: none; --theme_dark--scrollbar: #23242599; --theme_dark--scrollbar-border: transparent; --theme_dark--scrollbar_hover: #37383899; - --theme_dark--card: #101010; + --theme_dark--card: rgb(8, 8, 8); --theme_dark--gallery: rgba(26, 26, 26, 0.3); + --theme_dark--select_input: rgb(12, 12, 12); --theme_dark--table-border: rgba(46, 46, 46, 0.7); + --theme_dark--ui-border: var(--theme_dark--table-border); --theme_dark--interactive_hover: #020202; --theme_dark--option_hover-background: rgb(32, 32, 32); diff --git a/mods/littilepig-dark/mod.js b/mods/littilepig-dark/mod.js index a655447..469127c 100644 --- a/mods/littilepig-dark/mod.js +++ b/mods/littilepig-dark/mod.js @@ -12,7 +12,7 @@ module.exports = { tags: ['theme', 'dark'], name: 'littlepig dark', desc: 'a purple monospaced theme using emojis and colourful text.', - version: '0.1.1', + version: '0.1.2', author: { name: 'Lizishan', link: 'https://www.reddit.com/user/Lizishan/', diff --git a/mods/littilepig-dark/styles.css b/mods/littilepig-dark/styles.css index af8c8a1..cf06d90 100644 --- a/mods/littilepig-dark/styles.css +++ b/mods/littilepig-dark/styles.css @@ -10,10 +10,10 @@ --theme_dark--sidebar: #24222c; --theme_dark--dragarea: #19181f; - --theme_light--font_sans: 'JetBrains Mono'; - --theme_light--font_serif: 'JetBrains Mono'; - --theme_light--font_mono: 'JetBrains Mono'; - --theme_light--font_code: 'JetBrains Mono'; + --theme_dark--font_sans: 'JetBrains Mono'; + --theme_dark--font_serif: 'JetBrains Mono'; + --theme_dark--font_mono: 'JetBrains Mono'; + --theme_dark--font_code: 'JetBrains Mono'; --theme_dark--scrollbar: #221f29; --theme_dark--scrollbar_hover: #312d3c; diff --git a/mods/material-ocean/styles.css b/mods/material-ocean/styles.css index cb6bc4f..e00d769 100644 --- a/mods/material-ocean/styles.css +++ b/mods/material-ocean/styles.css @@ -7,6 +7,7 @@ :root { --ocean-main: #0f111a; --ocean-sec: #00010a; + --ocean-tet: #000108; --ocean-accent: #ff4151; --ocean-gray: #e0e0e0; --ocean-brown: #d8b6a6; @@ -28,8 +29,10 @@ --theme_dark--card: var(--ocean-sec); --theme_dark--gallery: var(--ocean-sec); + --theme_dark--select_input: var(--ocean-tet); --theme_dark--table-border: rgba(255, 255, 255, 0.1); - --theme_dark--interactive_hover: var(--ocean-main); + --theme_dark--ui-border: var(--theme_dark--table-border); + --theme_dark--interactive_hover: var(--ocean-tet); --theme_dark--button_close: var(--ocean-accent); --theme_dark--selected: rgba(255, 65, 81, 0.2); @@ -58,16 +61,16 @@ --theme_dark--text_pink: var(--ocean-pink); --theme_dark--text_red: var(--ocean-red); - --theme_dark--select-text: var(--ocean-main); - --theme_dark--select_gray: var(--ocean-gray); - --theme_dark--select_brown: var(--ocean-brown); - --theme_dark--select_orange: var(--ocean-orange); - --theme_dark--select_yellow: var(--ocean-yellow); - --theme_dark--select_green: var(--ocean-green); - --theme_dark--select_blue: var(--ocean-blue); - --theme_dark--select_purple: var(--ocean-purple); - --theme_dark--select_pink: var(--ocean-pink); - --theme_dark--select_red: var(--ocean-red); + --theme_dark--bg-text: var(--ocean-main); + --theme_dark--bg_gray: var(--ocean-gray); + --theme_dark--bg_brown: var(--ocean-brown); + --theme_dark--bg_orange: var(--ocean-orange); + --theme_dark--bg_yellow: var(--ocean-yellow); + --theme_dark--bg_green: var(--ocean-green); + --theme_dark--bg_blue: var(--ocean-blue); + --theme_dark--bg_purple: var(--ocean-purple); + --theme_dark--bg_pink: var(--ocean-pink); + --theme_dark--bg_red: var(--ocean-red); --theme_dark--line-text: var(--ocean-main); --theme_dark--line_gray: #e0e0e089; @@ -80,16 +83,16 @@ --theme_dark--line_pink: #ffc0cbb1; --theme_dark--line_red: #bf616a9e; - --theme_dark--bg-text: var(--theme_dark--select-text); - --theme_dark--bg_gray: var(--theme_dark--select_gray); - --theme_dark--bg_brown: var(--theme_dark--select_brown); - --theme_dark--bg_orange: var(--theme_dark--select_orange); - --theme_dark--bg_yellow: var(--theme_dark--select_yellow); - --theme_dark--bg_green: var(--theme_dark--select_green); - --theme_dark--bg_blue: var(--theme_dark--select_blue); - --theme_dark--bg_purple: var(--theme_dark--select_purple); - --theme_dark--bg_pink: var(--theme_dark--select_pink); - --theme_dark--bg_red: var(--theme_dark--select_red); + --theme_dark--select-text: var(--theme_dark--bg-text); + --theme_dark--select_gray: var(--theme_dark--bg_gray); + --theme_dark--select_brown: var(--theme_dark--bg_brown); + --theme_dark--select_orange: var(--theme_dark--bg_orange); + --theme_dark--select_yellow: var(--theme_dark--bg_yellow); + --theme_dark--select_green: var(--theme_dark--bg_green); + --theme_dark--select_blue: var(--theme_dark--bg_blue); + --theme_dark--select_purple: var(--theme_dark--bg_purple); + --theme_dark--select_pink: var(--theme_dark--bg_pink); + --theme_dark--select_red: var(--theme_dark--bg_red); --theme_dark--callout-text: var(--theme_dark--line-text); --theme_dark--callout_gray: var(--theme_dark--line_gray); diff --git a/mods/neutral/styles.css b/mods/neutral/styles.css index 5f6c242..dff7185 100644 --- a/mods/neutral/styles.css +++ b/mods/neutral/styles.css @@ -38,7 +38,9 @@ --theme_dark--card: #171717; --theme_dark--gallery: rgba(105, 105, 105, 0.05); + --theme_dark--select_input: #1d1d1d; --theme_dark--table-border: rgba(78, 78, 78, 0.7); + --theme_dark--ui-border: var(--theme_dark--table-border); --theme_dark--interactive_hover: rgb(29, 29, 29); --theme_dark--selected: #52525244; @@ -66,25 +68,15 @@ --theme_dark--text_pink: #d285aa; --theme_dark--text_red: #ce535f; - --theme_dark--select_gray: #585858; - --theme_dark--select_brown: #333333; - --theme_dark--select_orange: #9a5a3f; - --theme_dark--select_yellow: #b58a46; - --theme_dark--select_green: #657953; - --theme_dark--select_blue: #355475; - --theme_dark--select_purple: #775186; - --theme_dark--select_pink: #8e4b63; - --theme_dark--select_red: #8c3d3d; - - --theme_dark--bg_gray: var(--theme_dark--select_gray); - --theme_dark--bg_brown: var(--theme_dark--select_brown); - --theme_dark--bg_orange: var(--theme_dark--select_orange); - --theme_dark--bg_yellow: var(--theme_dark--select_yellow); - --theme_dark--bg_green: var(--theme_dark--select_green); - --theme_dark--bg_blue: var(--theme_dark--select_blue); - --theme_dark--bg_purple: var(--theme_dark--select_purple); - --theme_dark--bg_pink: var(--theme_dark--select_pink); - --theme_dark--bg_red: var(--theme_dark--select_red); + --theme_dark--bg_gray: #585858; + --theme_dark--bg_brown: #333333; + --theme_dark--bg_orange: #9a5a3f; + --theme_dark--bg_yellow: #b58a46; + --theme_dark--bg_green: #657953; + --theme_dark--bg_blue: #355475; + --theme_dark--bg_purple: #775186; + --theme_dark--bg_pink: #8e4b63; + --theme_dark--bg_red: #8c3d3d; --theme_dark--line_gray: #585858; --theme_dark--line_brown: #333333; @@ -96,6 +88,16 @@ --theme_dark--line_pink: #8e4b63; --theme_dark--line_red: #8c3d3d; + --theme_dark--select_gray: var(--theme_dark--bg_gray); + --theme_dark--select_brown: var(--theme_dark--bg_brown); + --theme_dark--select_orange: var(--theme_dark--bg_orange); + --theme_dark--select_yellow: var(--theme_dark--bg_yellow); + --theme_dark--select_green: var(--theme_dark--bg_green); + --theme_dark--select_blue: var(--theme_dark--bg_blue); + --theme_dark--select_purple: var(--theme_dark--bg_purple); + --theme_dark--select_pink: var(--theme_dark--bg_pink); + --theme_dark--select_red: var(--theme_dark--bg_red); + --theme_dark--callout_gray: rgba(88, 88, 88, 0.175); --theme_dark--callout_brown: rgb(51, 51, 51, 0.175); --theme_dark--callout_orange: rgb(154, 90, 63, 0.175); diff --git a/mods/pastel-dark/mod.js b/mods/pastel-dark/mod.js index c5a5f14..71d4319 100644 --- a/mods/pastel-dark/mod.js +++ b/mods/pastel-dark/mod.js @@ -12,7 +12,7 @@ module.exports = { tags: ['theme', 'dark'], name: 'pastel dark', desc: 'a smooth-transition true dark theme with a hint of pastel.', - version: '0.1.3', + version: '0.1.4', author: { name: 'zenith_illinois', link: 'https://www.reddit.com/user/zenith_illinois/', diff --git a/mods/pastel-dark/styles.css b/mods/pastel-dark/styles.css index 0137242..1587b7d 100644 --- a/mods/pastel-dark/styles.css +++ b/mods/pastel-dark/styles.css @@ -20,7 +20,9 @@ --theme_dark--card: #0f0f0f; --theme_dark--gallery: rgba(8, 8, 8, 0.05); + --theme_dark--select_input: #0d0d0d; --theme_dark--table-border: rgba(255, 255, 255, 0.1); + --theme_dark--ui-border: var(--theme_dark--table-border); --theme_dark--interactive_hover: #1e1e1e5c; --theme_dark--button_close: #eb5757; @@ -50,27 +52,16 @@ --theme_dark--text_pink: #f7b8dc; --theme_dark--text_red: #f8acb4; - --theme_dark--select-text: rgb(55, 53, 47); - --theme_dark--select_gray: #b1aeab; - --theme_dark--select_brown: #d8b6a6; - --theme_dark--select_orange: #fde3c0; - --theme_dark--select_yellow: #fcde93; - --theme_dark--select_green: #b3f5c8; - --theme_dark--select_blue: #bfe0fd; - --theme_dark--select_purple: #dac7fa; - --theme_dark--select_pink: #f7b8dc; - --theme_dark--select_red: #f8acb4; - - --theme_dark--bg-text: var(--theme_dark--select-text); - --theme_dark--bg_gray: var(--theme_dark--select_gray); - --theme_dark--bg_brown: var(--theme_dark--select_brown); - --theme_dark--bg_orange: var(--theme_dark--select_orange); - --theme_dark--bg_yellow: var(--theme_dark--select_yellow); - --theme_dark--bg_green: var(--theme_dark--select_green); - --theme_dark--bg_blue: var(--theme_dark--select_blue); - --theme_dark--bg_purple: var(--theme_dark--select_purple); - --theme_dark--bg_pink: var(--theme_dark--select_pink); - --theme_dark--bg_red: var(--theme_dark--select_red); + --theme_dark--bg-text: rgb(55, 53, 47); + --theme_dark--bg_gray: #b1aeab; + --theme_dark--bg_brown: #d8b6a6; + --theme_dark--bg_orange: #fde3c0; + --theme_dark--bg_yellow: #fcde93; + --theme_dark--bg_green: #b3f5c8; + --theme_dark--bg_blue: #bfe0fd; + --theme_dark--bg_purple: #dac7fa; + --theme_dark--bg_pink: #f7b8dc; + --theme_dark--bg_red: #f8acb4; --theme_dark--line-text: rgb(34, 34, 34); --theme_dark--line_gray: #c2c1c089; @@ -83,6 +74,17 @@ --theme_dark--line_pink: #fdcce8b1; --theme_dark--line_red: #ffc8ce9e; + --theme_dark--select-text: var(--theme_dark--bg-text); + --theme_dark--select_gray: var(--theme_dark--bg_gray); + --theme_dark--select_brown: var(--theme_dark--bg_brown); + --theme_dark--select_orange: var(--theme_dark--bg_orange); + --theme_dark--select_yellow: var(--theme_dark--bg_yellow); + --theme_dark--select_green: var(--theme_dark--bg_green); + --theme_dark--select_blue: var(--theme_dark--bg_blue); + --theme_dark--select_purple: var(--theme_dark--bg_purple); + --theme_dark--select_pink: var(--theme_dark--bg_pink); + --theme_dark--select_red: var(--theme_dark--bg_red); + --theme_dark--callout-text: var(--theme_dark--line-text); --theme_dark--callout_gray: var(--theme_dark--line_gray); --theme_dark--callout_brown: var(--theme_dark--line_brown); diff --git a/mods/scroll-to-top/mod.js b/mods/scroll-to-top/mod.js new file mode 100644 index 0000000..11c9316 --- /dev/null +++ b/mods/scroll-to-top/mod.js @@ -0,0 +1,129 @@ +/* + * scroll-to-top + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * (c) 2020 CloudHill + * under the MIT license + */ + +'use strict'; + +const { createElement } = require('../../pkg/helpers.js'); + +module.exports = { + id: '0a958f5a-17c5-48b5-8713-16190cae1959', + tags: ['extension'], + name: 'scroll to top', + desc: + 'add an arrow above the help button to scroll back to the top of a page.', + version: '1.0.0', + author: 'CloudHill', + options: [ + { + key: 'smooth', + label: 'smooth scrolling', + type: 'toggle', + value: true, + }, + { + key: 'top', + label: 'distance scrolled until button is shown:', + type: 'input', + value: 50, + }, + { + key: 'unit', + label: 'unit to measure distance with:', + type: 'select', + value: ['percent', 'pixels'], + }, + ], + hacks: { + 'renderer/preload.js'(store, __exports) { + document.addEventListener('readystatechange', (event) => { + if (document.readyState !== 'complete') return false; + const attempt_interval = setInterval(enhance, 500); + function enhance() { + if (!document.querySelector('.notion-frame')) return; + clearInterval(attempt_interval); + + const $container = document.createElement('div'); + const $help = document.querySelector('.notion-help-button'); + const $scroll = createElement( + '
🠙
' // 🠙; + ); + + $container.className = 'bottom-right-buttons'; + $help.after($container); + $container.append($scroll); + $container.append($help); + + if (store().top > 0) $scroll.classList.add('hidden'); + + $scroll.addEventListener('click', () => { + document.querySelector('.notion-frame > .notion-scroller').scroll({ + top: 0, + left: 0, + behavior: store().smooth ? 'smooth' : 'auto', + }); + }); + + let queue = []; + let $scroller = document.querySelector( + '.notion-frame > .notion-scroller' + ); + let top = store().top || 0; + + const observer = new MutationObserver((list, observer) => { + if (!queue.length) requestAnimationFrame(() => process(queue)); + queue.push(...list); + }); + observer.observe(document.body, { + childList: true, + subtree: true, + }); + + function process(list) { + queue = []; + setScrollDistance(); + + for (let { addedNodes } of list) { + if ( + addedNodes[0] && + (addedNodes[0].className === 'notion-page-content' || + addedNodes[0].className === 'notion-scroller') && + top > 0 + ) { + $scroll.classList.add('hidden'); + + $scroller = document.querySelector( + '.notion-frame > .notion-scroller' + ); + setScrollDistance(); + + $scroller.addEventListener('scroll', (event) => { + if ( + Math.ceil(event.target.scrollTop) < $scroller.top_distance + ) + $scroll.classList.add('hidden'); + else $scroll.classList.remove('hidden'); + }); + } + } + } + + function setScrollDistance() { + $scroller.top_distance = top; + if (top > 0 && store().unit === 'percent') { + let content_height = Array.from($scroller.children).reduce( + (h, c) => h + c.offsetHeight, + 0 + ); + $scroller.top_distance *= + (content_height - $scroller.offsetHeight) / 100; + } + } + } + }); + }, + }, +}; diff --git a/mods/scroll-to-top/styles.css b/mods/scroll-to-top/styles.css new file mode 100644 index 0000000..044e7f8 --- /dev/null +++ b/mods/scroll-to-top/styles.css @@ -0,0 +1,55 @@ +/* + * scroll-to-top + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * (c) 2020 CloudHill + * under the MIT license + */ + +.bottom-right-buttons { + position: absolute; + bottom: 33px; + right: 33px; + z-index: 101; + cursor: default; + pointer-events: none; +} + +.bottom-right-buttons > div { + margin-top: 8px; + pointer-events: auto; + + user-select: none; + transition: opacity 700ms ease 0s, color 700ms ease 0s, + transform 700ms ease 0s; + cursor: pointer; + + position: static !important; + + width: 36px; + height: 36px; + + display: flex; + align-items: center; + justify-content: center; + + border-radius: 100%; + font-size: 20px; + + background: var(--theme--interactive_hover); + box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border); +} + +.notion-scroll-button { + display: flex !important; +} + +.notion-scroll-button.hidden { + pointer-events: none; + + visibility: hidden; + opacity: 0; + transform: translateY(10px); + + transition-property: opacity, transform, visibility; + transition-delay: 0, 0, 700ms; +}