dark theme variables complete (?) + scrollbar fix + titlebar tweaks

2025-04-05 13:19:03 +00:00 · 2020-07-24 23:52:21 +10:00 · 2020-07-24 23:52:21 +10:00 · 5752a95c23
commit 5752a95c23
parent fd22fa286c
7 changed files with 178 additions and 46 deletions
--- a/mods/bracketed-links/styles.css
+++ b/mods/bracketed-links/styles.css
@ -0,0 +1,24 @@
+/*
+ * notion-enhancer
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
+ * (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;
+}
--- a/mods/core/titlebar.js
+++ b/mods/core/titlebar.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
--- 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
+              )};`
            );
        });
    };
--- 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),
  },
 };
--- a/mods/core/theme.css
+++ b/mods/core/theme.css
@ -2,14 +2,14 @@
 * notion-enhancer
 * (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
 * (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;
--- a/mods/core/titlebar.css
+++ b/mods/core/titlebar.css
@ -2,6 +2,7 @@
 * notion-enhancer
 * (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
 * (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;
+}
--- 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: [],
  };