responsive window buttons

2025-04-07 22:19:02 +00:00 · 2020-06-30 15:59:11 +10:00 · 2020-06-30 15:59:11 +10:00 · 6f6edb2cd8
commit 6f6edb2cd8
parent ef7718e920
9 changed files with 181 additions and 109 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -3,7 +3,7 @@
 if something is ~~crossed out~~, then it is no longer a feature included by default,
 but can still easily be enabled by following instructions in the [docs](README.md).

-### v0.6.0 (wip)
+### v0.6.0 (2020-06-30)

 - docs: custom fonts.
 - docs: font resizing.
@ -11,12 +11,10 @@ but can still easily be enabled by following instructions in the [docs](README.m
 - new: custom colour theming, demonstrated via the dark+ theme.
 - new: linux support (thanks for [@Blacksuan19](https://github.com/Blacksuan19)).
 - improved: if hotkey is pressed while notion is unfocused, it will bring it to the front rather than hiding it.
+- improved: stop window buttons breaking at smaller widths.
+- improved: more obviously visible drag area.
 - bugfix: specify UTF-8 encoding to prevent multibyte/gbk codec errors (thanks to [@etnperlong](https://github.com/etnperlong))

-//todo
-
- stop window buttons breaking at smaller widths
-
 ### v0.5.0 (2020-05-23)

 - new: running from the wsl.
--- a/README.md
+++ b/README.md
@ -58,7 +58,7 @@ unless you're sure you know what you're doing (if you have to ask, you probably
 this is probably a bug. please submit a
 [bug report](https://github.com/dragonwocky/notion-enhancer/issues/new?assignees=&labels=bug&template=bug-report.md&title=).

-**I have a new feature idea for the enhancer!**
+**can the enhancer do \_\_\_?**

 experienced problems with the notion app, or just want to add something a bit more to it? please submit a
 [feature request](https://github.com/dragonwocky/notion-enhancer/issues/new?assignees=&labels=enhancement&template=feature-request.md&title=).
@ -74,8 +74,8 @@ symbolised with an arrow (4th from the right). when toggled to point up,
 notion will remain the top visible window even if not focused.

 to customise which characters are used for these buttons, open in the `resources/preload.js` file,
-find the relevant button (read the comments) and replace its icon with your chosen unicode character (e.g.
-replacing `element.innerHTML = '⨉';` with `element.innerHTML = '🙄';`).
+find the relevant button icon (lines 80 - 111) and replace it with your chosen unicode character (e.g.
+replacing `return '⨉';` with `return '🙄';`).

 ### nicer scrollbars

@ -105,7 +105,7 @@ single-click to toggle app visibility. right click to open menu.

 - **run on startup**: run notion on boot/startup. (default: true)
 - **hide on open**: hide the launch of notion to the tray. (default: false)
- **open maximised**: maximise the app on open. (default: false)
+- **open maximised**: maximize the app on open. (default: false)
 - **close to tray**: close window to tray rather than closing outright
  on click of `⨉`. does not apply if multiple notion windows are open. (default: false)
 - **load theme.css**: loads the custom colour theme file.
--- a/customiser.py
+++ b/customiser.py
@ -135,11 +135,11 @@ try:
                        config: 'user-preferences',
                        defaults: {
                            openhidden: false,
-                            maximised: false
+                            maximized: false
                        }
                    });
                if (!store.openhidden || electron_1.BrowserWindow.getAllWindows().some(win => win.isVisible()))
-                    { window.show(); if (store.maximised) window.maximize(); }
+                    { window.show(); if (store.maximized) window.maximize(); }
                /* === INJECTION END === */
            """)
            with open(filepath + '/app/main/createWindow.js', 'w', encoding='UTF-8') as write:
@ -153,11 +153,10 @@ try:
            print(
                f' ...adjusting drag area for frameless window in {filepath}/app/renderer/index.js')
            content = content.read()
-            top = content.rfind('top')
-            content = content[:top] + content[top:].replace(
-                'right: 0', 'right: 420').replace(
-                'top: 0', 'top: 1 ').replace(
-                'height: 34', 'height: 16')
+            loc = content.rfind('dragRegionStyle')
+            content = content[:loc] + content[loc:] \
+                .replace('top: 0', 'top: 1', 1) \
+                .replace('height: 34', 'height: 10', 1)
            with open(filepath + '/app/renderer/index.js', 'w', encoding='UTF-8') as write:
                write.write(content)
    else:
@ -199,12 +198,13 @@ try:
        print(
            f' * {filepath}/app/main/main.js was not found: step skipped.')

-    if sys.platform == 'linux':
+    if sys.platform == 'linux' and 'microsoft' not in platform.uname()[3].lower():
        print(f' ...patching app launcher {filepath}/notion-app')
-        subprocess.call(['sed', '-i', 's/app\.asar/app/', '/usr/bin/notion-app'])
+        subprocess.call(
+            ['sed', '-i', 's/app\.asar/app/', '/usr/bin/notion-app'])
        # patch this too just in case
-        subprocess.call(['sed', '-i', 's/app\.asar/app/', f'{filepath}/notion-app'])
-
+        subprocess.call(['sed', '-i', 's/app\.asar/app/',
+                         f'{filepath}/notion-app'])

    print('\n>>> SUCCESSFULLY CUSTOMISED <<<')

--- a/docs/changelog.html
+++ b/docs/changelog.html
@ -1,4 +1,4 @@
-<!DOCTYPE html><!-- Documentative--><!-- (c) 2020 dragonwocky <thedragonring.bod@gmail.com>--><!-- (https://dragonwocky.me/) under the MIT license--><html prefix="og: http://ogp.me/ns#"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>changelog | notion enhancer</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Nunito+Sans"><link rel="stylesheet" href="docs.css"><script src="docs.js"></script><link rel="icon" href="web-logo.png" media="(prefers-color-scheme: dark)"><link rel="icon" href="web-logo.png"><meta name="title" content="changelog | notion enhancer"><meta name="description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta name="theme-color" content="rgb(75, 133, 209)"><meta property="og:type" content="article"><meta property="og:url" content="https://dragonwocky.me/notion-enhancer/changelog.html"><meta property="og:title" content="changelog"><meta property="og:site_name" content="notion enhancer"><meta property="og:description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta property="og:image" content="https://dragonwocky.me/notion-enhancer/web-logo.png"><meta property="twitter:card" content="summary"></head><body><aside class="menu"><div><div class="title"><h1>notion enhancer</h1><picture class="icon"><source srcset="web-logo.png" media="(prefers-color-scheme: dark)"><img src="web-logo.png"></picture></div></div><ul class="nav"><li class="entry"><a href="index.html">notion enhancer</a></li><li class="entry"><a href="styling.html">styling</a></li><li class="entry"><p>resources</p></li><li class="entry"><a href="#changelog">changelog</a><ul><li class="level-3"><a href="#v060-wip">v0.6.0 (wip)</a></li><li class="level-3"><a href="#v050-2020-05-23">v0.5.0 (2020-05-23)</a></li><li class="level-3"><a href="#v041-2020-02-13">v0.4.1 (2020-02-13)</a></li><li class="level-3"><a href="#v040">v0.4.0</a></li><li class="level-3"><a href="#v030">v0.3.0</a></li><li class="level-3"><a href="#v020">v0.2.0</a></li><li class="level-3"><a href="#v010">v0.1.0</a></li></ul></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/blob/master/LICENSE">license</a></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/">github</a></li><li class="entry"><a href="https://dragonwocky.me/">me (dragonwocky)</a></li></ul><p class="mark"><a href="https://dragonwocky.me/documentative">docs by documentative</a></p></aside><div class="wrapper"><div class="toggle"><button>☰</button><h1>notion enhancer</h1></div><article class="documentative"><div class="content">
+<!DOCTYPE html><!-- Documentative--><!-- (c) 2020 dragonwocky <thedragonring.bod@gmail.com>--><!-- (https://dragonwocky.me/) under the MIT license--><html prefix="og: http://ogp.me/ns#"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>changelog | notion enhancer</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Nunito+Sans"><link rel="stylesheet" href="docs.css"><script src="docs.js"></script><link rel="icon" href="web-logo.png" media="(prefers-color-scheme: dark)"><link rel="icon" href="web-logo.png"><meta name="title" content="changelog | notion enhancer"><meta name="description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta name="theme-color" content="rgb(75, 133, 209)"><meta property="og:type" content="article"><meta property="og:url" content="https://dragonwocky.me/notion-enhancer/changelog.html"><meta property="og:title" content="changelog"><meta property="og:site_name" content="notion enhancer"><meta property="og:description" content="an enhancer/customiser for the all-in-one productivity workspace notion.so"><meta property="og:image" content="https://dragonwocky.me/notion-enhancer/web-logo.png"><meta property="twitter:card" content="summary"></head><body><aside class="menu"><div><div class="title"><h1>notion enhancer</h1><picture class="icon"><source srcset="web-logo.png" media="(prefers-color-scheme: dark)"><img src="web-logo.png"></picture></div></div><ul class="nav"><li class="entry"><a href="index.html">notion enhancer</a></li><li class="entry"><a href="styling.html">styling</a></li><li class="entry"><p>resources</p></li><li class="entry"><a href="#changelog">changelog</a><ul><li class="level-3"><a href="#v060-2020-06-30">v0.6.0 (2020-06-30)</a></li><li class="level-3"><a href="#v050-2020-05-23">v0.5.0 (2020-05-23)</a></li><li class="level-3"><a href="#v041-2020-02-13">v0.4.1 (2020-02-13)</a></li><li class="level-3"><a href="#v040">v0.4.0</a></li><li class="level-3"><a href="#v030">v0.3.0</a></li><li class="level-3"><a href="#v020">v0.2.0</a></li><li class="level-3"><a href="#v010">v0.1.0</a></li></ul></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/blob/master/LICENSE">license</a></li><li class="entry"><a href="https://github.com/dragonwocky/notion-enhancer/">github</a></li><li class="entry"><a href="https://dragonwocky.me/">me (dragonwocky)</a></li></ul><p class="mark"><a href="https://dragonwocky.me/documentative">docs by documentative</a></p></aside><div class="wrapper"><div class="toggle"><button>☰</button><h1>notion enhancer</h1></div><article class="documentative"><div class="content">
    
          <section class="block" id="changelog">
            <h1>
@ -8,9 +8,9 @@
 but can still easily be enabled by following instructions in the <a href="index.html#" title="">docs</a>.</p>

          </section>
-          <section class="block" id="v060-wip">
+          <section class="block" id="v060-2020-06-30">
            <h3>
-              <a href="#v060-wip">v0.6.0 (wip)</a>
+              <a href="#v060-2020-06-30">v0.6.0 (2020-06-30)</a>
            </h3>
        <ul>
 <li>docs: custom fonts.</li>
@ -19,11 +19,9 @@ but can still easily be enabled by following instructions in the <a href="index.
 <li>new: custom colour theming, demonstrated via the dark+ theme.</li>
 <li>new: linux support (thanks for <a href="https://github.com/Blacksuan19#" title="">@Blacksuan19</a>).</li>
 <li>improved: if hotkey is pressed while notion is unfocused, it will bring it to the front rather than hiding it.</li>
+<li>improved: stop window buttons breaking at smaller widths.</li>
+<li>improved: more obviously visible drag area.</li>
 <li>bugfix: specify UTF-8 encoding to prevent multibyte/gbk codec errors (thanks to <a href="https://github.com/etnperlong#" title="">@etnperlong</a>)</li>
-</ul>
-<p>//todo</p>
-<ul>
-<li>stop window buttons breaking at smaller widths</li>
 </ul>

          </section>
--- a/docs/index.html
+++ b/docs/index.html
@ -57,7 +57,7 @@ additionally, if you ever need to change or reset your notion build, the <code>c
 <p><strong>something isn&#39;t working, and the suggestions here haven&#39;t fixed it...</strong></p>
 <p>this is probably a bug. please submit a
 <a href="https://github.com/dragonwocky/notion-enhancer/issues/new?assignees=&labels=bug&template=bug-report.md&title=#" title="">bug report</a>.</p>
-<p><strong>I have a new feature idea for the enhancer!</strong></p>
+<p><strong>can the enhancer do ___?</strong></p>
 <p>experienced problems with the notion app, or just want to add something a bit more to it? please submit a
 <a href="https://github.com/dragonwocky/notion-enhancer/issues/new?assignees=&labels=enhancement&template=feature-request.md&title=#" title="">feature request</a>.</p>

@ -77,8 +77,8 @@ additionally, if you ever need to change or reset your notion build, the <code>c
 symbolised with an arrow (4th from the right). when toggled to point up,
 notion will remain the top visible window even if not focused.</p>
 <p>to customise which characters are used for these buttons, open in the <code>resources/preload.js</code> file,
-find the relevant button (read the comments) and replace its icon with your chosen unicode character (e.g.
-replacing <code>element.innerHTML = &#39;⨉&#39;;</code> with <code>element.innerHTML = &#39;🙄&#39;;</code>).</p>
+find the relevant button icon (lines 80 - 111) and replace it with your chosen unicode character (e.g.
+replacing <code>return &#39;⨉&#39;;</code> with <code>return &#39;🙄&#39;;</code>).</p>

          </section>
          <section class="block" id="nicer-scrollbars">
@ -115,7 +115,7 @@ to your preference. you will need to run or re-run <code>customiser.py</code> af
 <ul>
 <li><strong>run on startup</strong>: run notion on boot/startup. (default: true)</li>
 <li><strong>hide on open</strong>: hide the launch of notion to the tray. (default: false)</li>
-<li><strong>open maximised</strong>: maximise the app on open. (default: false)</li>
+<li><strong>open maximised</strong>: maximize the app on open. (default: false)</li>
 <li><strong>close to tray</strong>: close window to tray rather than closing outright
 on click of <code>⨉</code>. does not apply if multiple notion windows are open. (default: false)</li>
 <li><strong>load theme.css</strong>: loads the custom colour theme file.
--- a/resources/preload.js
+++ b/resources/preload.js
@ -18,7 +18,7 @@ require('electron').remote.getGlobal('setTimeout')(() => {
      config: 'user-preferences',
      defaults: {
        openhidden: false,
-        maximised: false,
+        maximized: false,
        tray: false,
        theme: false,
      },
@ -40,62 +40,96 @@ require('electron').remote.getGlobal('setTimeout')(() => {
      style.innerHTML = file;
      head.appendChild(style);
    });
+    document.body.classList.add('enhanced');

    const appwindow = require('electron').remote.getCurrentWindow();

    /* window control buttons */
-    let node = document.querySelector('div.notion-topbar > div'),
-      element = document.createElement('div');
-    element.id = 'window-buttons-area';
-    node.appendChild(element);
-    node = document.querySelector('#window-buttons-area');
+    const buttons = document.createElement('div'),
+      dragarea = document.createElement('div');
+    dragarea.className = 'window-dragarea';
+    document
+      .querySelector('.notion-topbar')
+      .parentElement.appendChild(dragarea);
+    buttons.className = 'window-topbar-container';
+    buttons.innerHTML = `
+        <div class="window-buttons-area">
+          <button class="window-button btn-alwaysontop"></button>
+          <button class="window-button btn-minimize"></button>
+          <button class="window-button btn-maximize"></button>
+          <button class="window-button btn-close"></button>
+        </div>
+      `;
+    document.querySelector('.notion-topbar').parentElement.appendChild(buttons);
+    document
+      .querySelector('.window-topbar-container')
+      .appendChild(document.querySelector('.notion-topbar'));
+    document
+      .querySelector('.window-topbar-container')
+      .appendChild(
+        document.querySelector('.notion-history-back-button').parentElement
+      );

-    // always-on-top
-    const alwaysontopEl = document.createElement('button');
-    alwaysontopEl.classList.add('window-buttons', 'btn-alwaysontop');
-    alwaysontopEl.innerHTML = '🠛';
-    alwaysontopEl.onclick = function () {
-      const state = appwindow.isAlwaysOnTop();
-      appwindow.setAlwaysOnTop(!state);
-      this.innerHTML = state ? '🠛' : '🠙';
-    };
-    node.appendChild(alwaysontopEl);
+    const button_icons = {
+        alwaysontop() {
+          return appwindow.isAlwaysOnTop() ? '🠙' : '🠛';
+        },
+        minimize() {
+          return '⚊';
+        },
+        maximize() {
+          return appwindow.isMaximized() ? '🗗' : '🗖';
+        },
+        close() {
+          return '⨉';
+        },
+      },
+      button_actions = {
+        alwaysontop() {
+          appwindow.setAlwaysOnTop(!appwindow.isAlwaysOnTop());
+          this.innerHTML = button_icons.alwaysontop();
+        },
+        minimize() {
+          appwindow.minimize();
+        },
+        maximize() {
+          appwindow.isMaximized()
+            ? appwindow.unmaximize()
+            : appwindow.maximize();
+          this.innerHTML = button_icons.maximize();
+        },
+        close() {
+          if (
+            store.tray &&
+            require('electron').remote.BrowserWindow.getAllWindows().length ===
+              1
+          ) {
+            appwindow.hide();
+          } else appwindow.close();
+        },
+      },
+      button_elements = {
+        alwaysontop: document.querySelector('.window-button.btn-alwaysontop'),
+        minimize: document.querySelector('.window-button.btn-minimize'),
+        maximize: document.querySelector('.window-button.btn-maximize'),
+        close: document.querySelector('.window-button.btn-close'),
+      };

-    // minimise
-    const minimizeEl = document.createElement('button');
-    minimizeEl.classList.add('window-buttons', 'btn-minimize');
-    minimizeEl.innerHTML = '⚊';
-    minimizeEl.onclick = () => appwindow.minimize();
-    node.appendChild(minimizeEl);
+    button_elements.alwaysontop.innerHTML = button_icons.alwaysontop();
+    button_elements.alwaysontop.onclick = button_actions.alwaysontop;

-    // maximise
-    const maximiseEl = document.createElement('button'),
-      maximiseIcon = () => (appwindow.isMaximized() ? '🗗' : '🗖');
-    maximiseEl.classList.add('window-buttons', 'btn-maximize');
-    maximiseEl.innerHTML = maximiseIcon();
-    maximiseEl.onclick = function () {
-      if (appwindow.isMaximized()) appwindow.unmaximize();
-      else appwindow.maximize();
-      this.innerHTML = maximiseIcon();
-    };
-    node.appendChild(maximiseEl);
-    require('electron').remote.app.on('browser-window-focus', (event, win) => {
-      if (win.id == appwindow.id) maximiseEl.innerHTML = maximiseIcon();
-    });
+    button_elements.minimize.innerHTML = button_icons.minimize();
+    button_elements.minimize.onclick = button_actions.minimize;

-    // close
-    const closeEl = document.createElement('button');
-    closeEl.classList.add('window-buttons');
-    closeEl.innerHTML = '⨉';
-    closeEl.onclick = () => {
-      if (
-        store.tray &&
-        require('electron').remote.BrowserWindow.getAllWindows().length === 1
-      ) {
-        appwindow.hide();
-      } else appwindow.close();
-    };
-    node.appendChild(closeEl);
+    button_elements.maximize.innerHTML = button_icons.maximize();
+    button_elements.maximize.onclick = button_actions.maximize;
+    setInterval(() => {
+      if (button_elements.maximize.innerHTML != button_icons.maximize())
+        button_elements.maximize.innerHTML = button_icons.maximize();
+    }, 1000);
+
+    button_elements.close.innerHTML = button_icons.close();
+    button_elements.close.onclick = button_actions.close;

    /* reload window */
    document.defaultView.addEventListener(
--- a/resources/theme.css
+++ b/resources/theme.css
@ -9,6 +9,7 @@
  /** backgrounds **/
  --theme-main: rgb(5, 5, 5);
  --theme-sidebar: rgb(1, 1, 1);
+  --theme-drag: #030303;
  --theme-primary: rgb(177, 24, 24);
  --theme-primary_hover: rgb(202, 26, 26);
  --theme-primary_click: rgb(219, 41, 41);
@ -56,11 +57,15 @@

 /** backgrounds **/

+.notion-dark-theme .window-dragarea {
+  background: var(--theme-drag);
+}
+
 [style*='background: rgb(55, 60, 63)'],
 [style*='background: rgba(69, 75, 78, 0.3)'] {
  background: var(--theme-sidebar) !important;
 }
-.notion-dark-theme .window-buttons,
+.notion-dark-theme .window-button,
 .notion-body.dark,
 [style*='background: rgb(47, 52, 55)'] {
  background: var(--theme-main) !important;
@ -72,7 +77,7 @@
  box-shadow: none !important;
 }
 .notion-table-view > :first-child > :first-child,
-.notion-dark-theme .window-buttons:hover,
+.notion-dark-theme .window-button:hover,
 [style*='background: rgb(71, 76, 80)'],
 [style*='background: rgb(80, 85, 88)'],
 [style*='background: rgb(98, 102, 104)'] {
@ -87,6 +92,7 @@
 }

 /* scrollbars */
+
 .notion-dark-theme ::-webkit-scrollbar-corner {
  background-color: transparent; /* for overlap */
 }
--- a/resources/tray.js
+++ b/resources/tray.js
@ -21,7 +21,7 @@ function enhancements() {
      config: 'user-preferences',
      defaults: {
        openhidden: false,
-        maximised: false,
+        maximized: false,
        tray: false,
        theme: false,
      },
@ -49,14 +49,14 @@ function enhancements() {
          : (store.openhidden = false),
    },
    {
-      id: 'maximised',
+      id: 'maximized',
      label: 'open maximised',
      type: 'checkbox',
-      checked: store.maximised,
+      checked: store.maximized,
      click: () =>
-        contextMenu.getMenuItemById('maximised').checked
-          ? (store.maximised = true)
-          : (store.maximised = false),
+        contextMenu.getMenuItemById('maximized').checked
+          ? (store.maximized = true)
+          : (store.maximized = false),
    },
    {
      id: 'tray',
@ -91,7 +91,7 @@ function enhancements() {
  tray.setContextMenu(contextMenu);

  function showWindows(windows) {
-    if (store.maximised)
+    if (store.maximized)
      windows.forEach((win) => [win.maximize(), win.focus()]);
    else windows.forEach((win) => win.show());
  }
--- a/resources/user.css
+++ b/resources/user.css
@ -5,15 +5,58 @@
 * (https://dragonwocky.me/) under the MIT license
 */

-/* window control buttons: block */
-#window-buttons-area {
-  padding-left: 14px;
-  user-select: none;
+/* window control buttons */
+.window-dragarea {
+  height: 10px;
+  width: 100%;
 }
-/* window control buttons: light theme */
-.notion-light-theme .window-buttons {
-  background: rgb(255, 255, 255);
-  color: black;
+.notion-light-theme .window-dragarea {
+  background: #e6e6e6;
+}
+.notion-dark-theme .window-dragarea {
+  background: #272d2f;
+}
+.window-topbar-container {
+  display: flex;
+  flex-direction: row-reverse;
+  user-select: none;
+  -webkit-app-region: drag;
+}
+.window-topbar-container > :last-child,
+.window-buttons-area {
+  display: flex;
+  align-items: center;
+  height: 45px;
+}
+.window-topbar-container > :last-child {
+  padding-left: 12px;
+}
+.window-buttons-area {
+  justify-content: flex-end;
+  padding-right: 12px;
+  font-size: 14px;
+}
+@media (max-width: 760px) {
+  .window-topbar-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+  .titlebar-draggable-area {
+    top: 10px;
+  }
+  .window-topbar-container > :last-child {
+    grid-row: 1;
+  }
+  .notion-topbar {
+    grid-column-start: span 2;
+  }
+  .notion-topbar > div {
+    padding-right: 12px !important;
+  }
+}
+/* window control buttons */
+.window-button {
+  background: transparent;
  border: 0;
  margin: 0px 0px 0px 9px;
  width: 32px;
@ -21,23 +64,16 @@
  border-radius: 4px;
  font-size: 16px;
  transition-duration: 0.2s;
+}
+/* window control buttons: light theme */
+.notion-light-theme .window-button {
  font-weight: bold;
 }
-.notion-light-theme .window-buttons:hover {
+.notion-light-theme .window-button:hover {
  background: rgb(239, 239, 239);
 }
 /* window control buttons: dark theme */
-.notion-dark-theme .window-buttons {
-  background: rgb(47, 52, 55);
-  border: 0;
-  margin: 0px 0px 0px 9px;
-  width: 32px;
-  line-height: 26px;
-  border-radius: 4px;
-  font-size: 16px;
-  transition-duration: 0.2s;
-}
-.notion-dark-theme .window-buttons:hover {
+.notion-dark-theme .window-button:hover {
  background: rgb(71, 76, 80);
 }