From 7b24f7f57d6266cf9e1426e3895b4ca64a873e07 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Tue, 14 Oct 2025 22:24:37 +0300
Subject: [PATCH 01/19] style/canvas: tweak the UI

---
 apps/client/src/stylesheets/style.css         |  3 +-
 .../src/stylesheets/theme-next/base.css       |  1 +
 .../stylesheets/theme-next/notes/canvas.css   | 48 +++++++++++++++++++
 3 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 apps/client/src/stylesheets/theme-next/notes/canvas.css

diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css
index 44ed76997..653eca57f 100644
--- a/apps/client/src/stylesheets/style.css
+++ b/apps/client/src/stylesheets/style.css
@@ -371,7 +371,8 @@ button kbd {
 }
 
 body.desktop .dropdown-menu,
-body.desktop .tabulator-popup-container {
+body.desktop .tabulator-popup-container,
+:root .excalidraw .dropdown-menu .dropdown-menu-container {
     border: 1px solid var(--dropdown-border-color);
     column-rule: 1px solid var(--dropdown-border-color);
     box-shadow: 0px 10px 20px rgba(0, 0, 0, var(--dropdown-shadow-opacity));
diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css
index a167c08b5..d75f17bf3 100644
--- a/apps/client/src/stylesheets/theme-next/base.css
+++ b/apps/client/src/stylesheets/theme-next/base.css
@@ -4,6 +4,7 @@
 @import url(./pages.css);
 @import url(./ribbon.css);
 @import url(./notes/text.css);
+@import url(./notes/canvas.css);
 @import url(./notes/collections/table.css);
 
 @font-face {
diff --git a/apps/client/src/stylesheets/theme-next/notes/canvas.css b/apps/client/src/stylesheets/theme-next/notes/canvas.css
new file mode 100644
index 000000000..00b801cf8
--- /dev/null
+++ b/apps/client/src/stylesheets/theme-next/notes/canvas.css
@@ -0,0 +1,48 @@
+:root .excalidraw {
+    --ui-font: var(--main-font-family);
+
+
+    /* Button hover background color */
+    --button-hover-bg: var(--hover-item-background-color);
+    --color-surface-high: var(--hover-item-background-color);
+
+
+    --button-active-border: transparent;
+    --color-brand-active: transparent;
+
+    --color-surface-mid: transparent;
+    --color-surface-low: transparent;
+
+    /* Selected button icon fill color */
+    --color-on-primary-container: var(--ck-editor-toolbar-button-on-color);
+    --color-primary: var(--ck-editor-toolbar-button-on-color);
+
+    /* Selected button icon background color */
+    --color-surface-primary-container: var(--ck-editor-toolbar-button-on-background);
+    --color-primary-light: var(--ck-editor-toolbar-button-on-background);
+
+    --island-bg-color: var(--floating-button-background-color);
+
+}
+
+.excalidraw .Island,
+.excalidraw .zoom-actions,
+.undo-redo-buttons {
+    box-shadow: 1px 1px 1px var(--floating-button-shadow-color);
+    backdrop-filter: blur(10px) saturate(6);
+}
+
+:root .excalidraw .main-menu-trigger,
+:root .excalidraw .sidebar-trigger,
+:root .excalidraw .help-icon  {
+    box-shadow: none;
+}
+
+/* Selected color outline */
+:root .excalidraw .color-picker__button.active .color-picker__button-outline {
+    box-shadow: 0 0 0 2px var(--input-focus-outline-color)
+}
+
+:root .excalidraw .buttonList label.active {
+    border-color: transparent;
+}
\ No newline at end of file

From e6a88ddb04d94309beeb491cb9f2b24abe069f1e Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 15 Oct 2025 05:54:54 +0300
Subject: [PATCH 02/19] style/canvas: relocate the options panel to the side
 opposite to the tree

---
 .../client/src/stylesheets/theme-next/notes/canvas.css | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/apps/client/src/stylesheets/theme-next/notes/canvas.css b/apps/client/src/stylesheets/theme-next/notes/canvas.css
index 00b801cf8..6bc43e96f 100644
--- a/apps/client/src/stylesheets/theme-next/notes/canvas.css
+++ b/apps/client/src/stylesheets/theme-next/notes/canvas.css
@@ -45,4 +45,14 @@
 
 :root .excalidraw .buttonList label.active {
     border-color: transparent;
+}
+
+/* Options panel */
+
+body[dir=ltr] .excalidraw .Island.App-menu__left {
+    right: 0;
+}
+
+body[dir=rtl] .excalidraw .Island.App-menu__left {
+    left: 0;
 }
\ No newline at end of file

From c9ae1445a4e770ba3254fc699548bb497de71560 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 15 Oct 2025 06:53:35 +0300
Subject: [PATCH 03/19] style/canvas: restyle the options panel

---
 .../stylesheets/theme-next/notes/canvas.css   | 40 ++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/stylesheets/theme-next/notes/canvas.css b/apps/client/src/stylesheets/theme-next/notes/canvas.css
index 6bc43e96f..43b33e0c1 100644
--- a/apps/client/src/stylesheets/theme-next/notes/canvas.css
+++ b/apps/client/src/stylesheets/theme-next/notes/canvas.css
@@ -25,7 +25,7 @@
 
 }
 
-.excalidraw .Island,
+.excalidraw .Island:not(.App-menu__left),
 .excalidraw .zoom-actions,
 .undo-redo-buttons {
     box-shadow: 1px 1px 1px var(--floating-button-shadow-color);
@@ -49,10 +49,48 @@
 
 /* Options panel */
 
+.excalidraw .Island.App-menu__left {
+    box-shadow: none;
+    background: transparent;
+    backdrop-filter: none;
+    width: 13.2em;
+}
+
 body[dir=ltr] .excalidraw .Island.App-menu__left {
     right: 0;
 }
 
 body[dir=rtl] .excalidraw .Island.App-menu__left {
     left: 0;
+}
+
+:root .App-menu__left > .panelColumn {
+    row-gap: 5px;
+}
+
+/* Options panel card */
+:root .App-menu__left > .panelColumn > fieldset,
+:root .App-menu__left > .panelColumn > label,
+:root .App-menu__left > .panelColumn > div:has(> *) {
+    margin: 0;
+    border-radius: 4px;
+    box-shadow: 1px 1px 1px var(--floating-button-shadow-color);
+    background: var(--floating-button-background-color);
+    padding: 8px 12px;
+    backdrop-filter: blur(10px) saturate(6);
+}
+
+/* Options panel card title */
+:root .App-menu__left fieldset > legend,
+:root .App-menu__left div > h3,
+:root .App-menu__left > .panelColumn > label {
+    text-transform: uppercase;
+    font-size: .65rem;
+    letter-spacing: 1pt;
+    color: var(--muted-text-color);
+}
+
+/* Options panel button bar */
+:root .excalidraw .App-menu__left .buttonList {
+    padding: 0;
 }
\ No newline at end of file

From bde658d2acee599c500cbceef8261e6b5b6ac14d Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 15 Oct 2025 07:00:34 +0300
Subject: [PATCH 04/19] style/canvas: reposition the floating buttons

---
 apps/client/src/stylesheets/theme-next/notes/canvas.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/apps/client/src/stylesheets/theme-next/notes/canvas.css b/apps/client/src/stylesheets/theme-next/notes/canvas.css
index 43b33e0c1..bddccd4c9 100644
--- a/apps/client/src/stylesheets/theme-next/notes/canvas.css
+++ b/apps/client/src/stylesheets/theme-next/notes/canvas.css
@@ -25,6 +25,10 @@
 
 }
 
+:root .type-canvas {
+    --floating-buttons-vert-offset: 48px;
+}
+
 .excalidraw .Island:not(.App-menu__left),
 .excalidraw .zoom-actions,
 .undo-redo-buttons {

From d7b085cfa0253f613d8aed42929d2e72b069530e Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 15 Oct 2025 07:05:57 +0300
Subject: [PATCH 05/19] style/canvas: relocate the properties panel

---
 .../client/src/stylesheets/theme-next/notes/canvas.css | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/apps/client/src/stylesheets/theme-next/notes/canvas.css b/apps/client/src/stylesheets/theme-next/notes/canvas.css
index bddccd4c9..2d08ed0bf 100644
--- a/apps/client/src/stylesheets/theme-next/notes/canvas.css
+++ b/apps/client/src/stylesheets/theme-next/notes/canvas.css
@@ -97,4 +97,14 @@ body[dir=rtl] .excalidraw .Island.App-menu__left {
 /* Options panel button bar */
 :root .excalidraw .App-menu__left .buttonList {
     padding: 0;
+}
+
+/* Properties panel */
+
+body[dir=ltr] .excalidraw .exc-stats {
+    left: 0;
+}
+
+body[dir=ltr] .excalidraw .exc-stats {
+    right: 0;
 }
\ No newline at end of file

From 93af4f24e532d058014e2efe3c21c007e52232f2 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 15 Oct 2025 12:27:04 +0300
Subject: [PATCH 06/19] style/canvas: restyle context menus

---
 apps/client/src/stylesheets/style.css         | 12 +++++---
 .../src/stylesheets/theme-next/base.css       | 15 ++++++----
 .../stylesheets/theme-next/notes/canvas.css   | 30 +++++++++++++++++++
 3 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css
index 02e6af9cf..64e882a02 100644
--- a/apps/client/src/stylesheets/style.css
+++ b/apps/client/src/stylesheets/style.css
@@ -360,7 +360,8 @@ button kbd {
 }
 
 .dropdown-menu,
-.tabulator-popup-container {
+.tabulator-popup-container,
+:root .excalidraw .popover {
     color: var(--menu-text-color) !important;
     font-size: inherit;
     background: var(--menu-background-color) !important;
@@ -372,7 +373,8 @@ button kbd {
 
 body.desktop .dropdown-menu,
 body.desktop .tabulator-popup-container,
-:root .excalidraw .dropdown-menu .dropdown-menu-container {
+:root .excalidraw .dropdown-menu .dropdown-menu-container,
+:root .excalidraw .popover {
     border: 1px solid var(--dropdown-border-color);
     column-rule: 1px solid var(--dropdown-border-color);
     box-shadow: 0px 10px 20px rgba(0, 0, 0, var(--dropdown-shadow-opacity));
@@ -417,7 +419,8 @@ body.desktop .tabulator-popup-container,
 
 .dropdown-menu a:hover:not(.disabled),
 .dropdown-item:hover:not(.disabled, .dropdown-container-item),
-.tabulator-menu-item:hover {
+.tabulator-menu-item:hover,
+:root .excalidraw .popover .context-menu-item:hover {
     color: var(--hover-item-text-color) !important;
     background-color: var(--hover-item-background-color) !important;
     border-color: var(--hover-item-border-color) !important;
@@ -458,7 +461,8 @@ body #context-menu-container .dropdown-item > span {
 }
 
 .dropdown-item,
-.dropdown-header {
+.dropdown-header,
+:root .excalidraw .popover .context-menu-item:hover {
     color: var(--menu-text-color) !important;
     border: 1px solid transparent !important;
 }
diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css
index d75f17bf3..6cb12dbd7 100644
--- a/apps/client/src/stylesheets/theme-next/base.css
+++ b/apps/client/src/stylesheets/theme-next/base.css
@@ -97,7 +97,8 @@ body.backdrop-effects-disabled {
  * supported when this class is used.
  */
 
- .dropdown-menu:not(.static) {
+ .dropdown-menu:not(.static),
+ :root .excalidraw .popover {
     border-radius: var(--dropdown-border-radius);
     padding: var(--menu-padding-size) !important;
     font-size: 0.9rem !important;
@@ -115,7 +116,8 @@ body.mobile .dropdown-menu .dropdown-menu {
 }
 
 body.desktop .dropdown-menu::before,
-:root .ck.ck-dropdown__panel::before {
+:root .ck.ck-dropdown__panel::before,
+:root .excalidraw .popover::before {
     content: "";
     backdrop-filter: var(--dropdown-backdrop-filter);
     border-radius: var(--dropdown-border-radius);
@@ -149,7 +151,8 @@ body.desktop .dropdown-submenu .dropdown-menu {
 }
 
 .dropdown-item,
-body.mobile .dropdown-submenu .dropdown-toggle {
+body.mobile .dropdown-submenu .dropdown-toggle,
+:root .excalidraw .popover .context-menu-item {
     padding: 2px 2px 2px 8px !important;
     padding-inline-end: 22px !important;
     /* Note: the right padding should also accommodate the submenu arrow. */
@@ -215,13 +218,15 @@ html body .dropdown-item[disabled] {
     margin-inline-start: 16px;
 }
 
-.dropdown-divider {
+.dropdown-divider,
+.excalidraw .context-menu hr {
     position: relative;
     border-color: transparent !important;
     overflow: visible;
 }
 
-.dropdown-divider::after {
+.dropdown-divider::after,
+.excalidraw .context-menu hr::before {
     position: absolute;
     content: "";
     top: -1px;
diff --git a/apps/client/src/stylesheets/theme-next/notes/canvas.css b/apps/client/src/stylesheets/theme-next/notes/canvas.css
index 2d08ed0bf..7de1b520a 100644
--- a/apps/client/src/stylesheets/theme-next/notes/canvas.css
+++ b/apps/client/src/stylesheets/theme-next/notes/canvas.css
@@ -29,6 +29,36 @@
     --floating-buttons-vert-offset: 48px;
 }
 
+/* Context menus */
+:root .excalidraw .popover {
+    padding: 0;
+    max-width: unset;
+    font-family: var(--main-font-family);
+    overflow: hidden !important;
+}
+
+:root .excalidraw .popover > * {
+    height: 100%;
+    margin: 0;
+    border: none;
+    padding: 0;
+    background: transparent;
+    box-shadow: none;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+:root .excalidraw .popover .context-menu-item {
+    border: 1px solid transparent;
+    padding-left: 16px !important;
+}
+
+.excalidraw .context-menu .context-menu-item-separator {
+    margin: 8px 0;
+    opacity: 1;
+}
+
+
 .excalidraw .Island:not(.App-menu__left),
 .excalidraw .zoom-actions,
 .undo-redo-buttons {

From 46901cf3fbd38e6b6aa768cb9b480b75fd12ff61 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 15 Oct 2025 13:10:23 +0300
Subject: [PATCH 07/19] style/canvas: improve context menus

---
 apps/client/src/stylesheets/style.css         |  4 +--
 .../src/stylesheets/theme-next/base.css       |  5 ++--
 .../stylesheets/theme-next/notes/canvas.css   | 30 +++++++++++++------
 3 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css
index 64e882a02..03d1bd8ff 100644
--- a/apps/client/src/stylesheets/style.css
+++ b/apps/client/src/stylesheets/style.css
@@ -420,7 +420,7 @@ body.desktop .tabulator-popup-container,
 .dropdown-menu a:hover:not(.disabled),
 .dropdown-item:hover:not(.disabled, .dropdown-container-item),
 .tabulator-menu-item:hover,
-:root .excalidraw .popover .context-menu-item:hover {
+:root .excalidraw .context-menu .context-menu-item:hover {
     color: var(--hover-item-text-color) !important;
     background-color: var(--hover-item-background-color) !important;
     border-color: var(--hover-item-border-color) !important;
@@ -462,7 +462,7 @@ body #context-menu-container .dropdown-item > span {
 
 .dropdown-item,
 .dropdown-header,
-:root .excalidraw .popover .context-menu-item:hover {
+:root .excalidraw .context-menu .context-menu-item:hover {
     color: var(--menu-text-color) !important;
     border: 1px solid transparent !important;
 }
diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css
index 6cb12dbd7..b9db9aa10 100644
--- a/apps/client/src/stylesheets/theme-next/base.css
+++ b/apps/client/src/stylesheets/theme-next/base.css
@@ -152,7 +152,7 @@ body.desktop .dropdown-submenu .dropdown-menu {
 
 .dropdown-item,
 body.mobile .dropdown-submenu .dropdown-toggle,
-:root .excalidraw .popover .context-menu-item {
+:root .excalidraw .context-menu .context-menu-item {
     padding: 2px 2px 2px 8px !important;
     padding-inline-end: 22px !important;
     /* Note: the right padding should also accommodate the submenu arrow. */
@@ -206,7 +206,8 @@ html body .dropdown-item[disabled] {
 }
 
 /* Menu item keyboard shortcut */
-.dropdown-item kbd {
+.dropdown-item kbd,
+.excalidraw .context-menu-item__shortcut {
     font-family: unset !important;
     font-size: unset !important;
     color: var(--menu-item-keyboard-shortcut-color) !important;
diff --git a/apps/client/src/stylesheets/theme-next/notes/canvas.css b/apps/client/src/stylesheets/theme-next/notes/canvas.css
index 7de1b520a..cff79acef 100644
--- a/apps/client/src/stylesheets/theme-next/notes/canvas.css
+++ b/apps/client/src/stylesheets/theme-next/notes/canvas.css
@@ -30,34 +30,46 @@
 }
 
 /* Context menus */
+
+/* Context menu - outer wrapper */
 :root .excalidraw .popover {
-    padding: 0;
     max-width: unset;
-    font-family: var(--main-font-family);
     overflow: hidden !important;
+    padding: 0;
+    font-family: var(--main-font-family);
 }
 
-:root .excalidraw .popover > * {
-    height: 100%;
+/* Context menu - inner wrapper */
+:root .excalidraw .popover > .context-menu {
     margin: 0;
-    border: none;
-    padding: 0;
-    background: transparent;
-    box-shadow: none;
     overflow-y: auto;
     overflow-x: hidden;
+    height: 100%;
+    border: none;
+    padding: 0;
+    box-shadow: none;
+    background: transparent;
 }
 
-:root .excalidraw .popover .context-menu-item {
+/* Context menu item */
+:root .excalidraw .context-menu .context-menu-item {
     border: 1px solid transparent;
     padding-left: 16px !important;
 }
 
+/* Context menu item keyboard shortcut */
+:root .excalidraw .context-menu-item__shortcut {
+    padding: 0;
+    opacity: 1;
+}
+
+/* Context menu separator */
 .excalidraw .context-menu .context-menu-item-separator {
     margin: 8px 0;
     opacity: 1;
 }
 
+/* Panels */
 
 .excalidraw .Island:not(.App-menu__left),
 .excalidraw .zoom-actions,

From 9411f44e3359a631584b4d81e09bb942aa4f3b94 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 15 Oct 2025 17:24:19 +0300
Subject: [PATCH 08/19] style/menus: add a way to customize the padding

---
 apps/client/src/stylesheets/theme-next/base.css | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css
index b9db9aa10..1648a0898 100644
--- a/apps/client/src/stylesheets/theme-next/base.css
+++ b/apps/client/src/stylesheets/theme-next/base.css
@@ -100,7 +100,7 @@ body.backdrop-effects-disabled {
  .dropdown-menu:not(.static),
  :root .excalidraw .popover {
     border-radius: var(--dropdown-border-radius);
-    padding: var(--menu-padding-size) !important;
+    padding: var(--padding, var(--menu-padding-size)) !important;
     font-size: 0.9rem !important;
 }
 
@@ -152,9 +152,16 @@ body.desktop .dropdown-submenu .dropdown-menu {
 
 .dropdown-item,
 body.mobile .dropdown-submenu .dropdown-toggle,
-:root .excalidraw .context-menu .context-menu-item {
-    padding: 2px 2px 2px 8px !important;
-    padding-inline-end: 22px !important;
+.excalidraw .context-menu .context-menu-item {
+    --menu-item-start-padding: 8px;
+    --menu-item-end-padding: 22px;
+    --menu-item-vertical-padding: 2px;
+    
+    padding-top: var(--menu-item-vertical-padding) !important;
+    padding-bottom: var(--menu-item-vertical-padding) !important;
+    padding-inline-start: var(--menu-item-start-padding) !important;
+    padding-inline-end: var(--menu-item-end-padding) !important;
+
     /* Note: the right padding should also accommodate the submenu arrow. */
     border-radius: 6px;
     cursor: default !important;

From 4b4d128856ee0d769aa89bfed7e02370676e346c Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 15 Oct 2025 17:24:50 +0300
Subject: [PATCH 09/19] style/canvas: tweak context menus

---
 apps/client/src/stylesheets/theme-next/notes/canvas.css | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/stylesheets/theme-next/notes/canvas.css b/apps/client/src/stylesheets/theme-next/notes/canvas.css
index cff79acef..14da56c52 100644
--- a/apps/client/src/stylesheets/theme-next/notes/canvas.css
+++ b/apps/client/src/stylesheets/theme-next/notes/canvas.css
@@ -33,15 +33,17 @@
 
 /* Context menu - outer wrapper */
 :root .excalidraw .popover {
+    --padding: 0;
+
     max-width: unset;
-    overflow: hidden !important;
-    padding: 0;
+    overflow: hidden;
     font-family: var(--main-font-family);
 }
 
 /* Context menu - inner wrapper */
 :root .excalidraw .popover > .context-menu {
     margin: 0;
+    padding: 8px !important;
     overflow-y: auto;
     overflow-x: hidden;
     height: 100%;
@@ -53,8 +55,9 @@
 
 /* Context menu item */
 :root .excalidraw .context-menu .context-menu-item {
+    --menu-item-start-padding: 22px;
+
     border: 1px solid transparent;
-    padding-left: 16px !important;
 }
 
 /* Context menu item keyboard shortcut */

From 210e001586e53ae7f076e5995dd84d278ce62500 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 15 Oct 2025 17:31:37 +0300
Subject: [PATCH 10/19] style/canvas: improve theme color support for context
 menus

---
 apps/client/src/stylesheets/theme-next/notes/canvas.css | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/apps/client/src/stylesheets/theme-next/notes/canvas.css b/apps/client/src/stylesheets/theme-next/notes/canvas.css
index 14da56c52..9597addec 100644
--- a/apps/client/src/stylesheets/theme-next/notes/canvas.css
+++ b/apps/client/src/stylesheets/theme-next/notes/canvas.css
@@ -60,6 +60,15 @@
     border: 1px solid transparent;
 }
 
+/* Context menu label */
+:root .excalidraw .context-menu-item__label {
+    color: var(--menu-text-color);
+}
+
+:root .excalidraw .context-menu-item:hover .context-menu-item__label {
+    color: var(--hover-item-text-color);
+}
+
 /* Context menu item keyboard shortcut */
 :root .excalidraw .context-menu-item__shortcut {
     padding: 0;

From d4fa6153c441e835b8fbeb947e0916df655a06c8 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 15 Oct 2025 17:36:13 +0300
Subject: [PATCH 11/19] style/canvas: stop highlighting with a red color the
 delete menu item

---
 apps/client/src/stylesheets/theme-next/notes/canvas.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/stylesheets/theme-next/notes/canvas.css b/apps/client/src/stylesheets/theme-next/notes/canvas.css
index 9597addec..859bcec00 100644
--- a/apps/client/src/stylesheets/theme-next/notes/canvas.css
+++ b/apps/client/src/stylesheets/theme-next/notes/canvas.css
@@ -61,7 +61,8 @@
 }
 
 /* Context menu label */
-:root .excalidraw .context-menu-item__label {
+:root .excalidraw .context-menu-item__label,
+:root .excalidraw .context-menu-item.dangerous .context-menu-item__label {
     color: var(--menu-text-color);
 }
 

From 48c7411ce48383a85eba4f0239e1da8989e20bc3 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 15 Oct 2025 18:01:21 +0300
Subject: [PATCH 12/19] style/canvas: tweak the main menu

---
 apps/client/src/stylesheets/theme-next/base.css     |  8 ++++++--
 .../src/stylesheets/theme-next/notes/canvas.css     | 13 +++++++++++++
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css
index 1648a0898..1ec859c3a 100644
--- a/apps/client/src/stylesheets/theme-next/base.css
+++ b/apps/client/src/stylesheets/theme-next/base.css
@@ -267,7 +267,9 @@ body[dir=rtl] .dropdown-menu:not([data-popper-placement="bottom-start"]) .dropdo
 /* Menu item group heading */
 
 /* The heading body */
-.dropdown-menu h6 {
+.dropdown-menu h6,
+.excalidraw .dropdown-menu-container .dropdown-menu-group-title,
+.excalidraw .dropdown-menu-container div[data-testid="canvas-background-label"] {
     position: relative;
     background: transparent;
     padding: 1em 8px 14px 8px;
@@ -278,7 +280,9 @@ body[dir=rtl] .dropdown-menu:not([data-popper-placement="bottom-start"]) .dropdo
 }
 
 /* The delimiter line */
-.dropdown-menu h6::before {
+.dropdown-menu h6::before,
+.excalidraw .dropdown-menu-container .dropdown-menu-group-title::before,
+.excalidraw .dropdown-menu-container div[data-testid="canvas-background-label"]::before {
     content: "";
     position: absolute;
     bottom: 8px;
diff --git a/apps/client/src/stylesheets/theme-next/notes/canvas.css b/apps/client/src/stylesheets/theme-next/notes/canvas.css
index 859bcec00..de7aa1173 100644
--- a/apps/client/src/stylesheets/theme-next/notes/canvas.css
+++ b/apps/client/src/stylesheets/theme-next/notes/canvas.css
@@ -82,6 +82,19 @@
     opacity: 1;
 }
 
+/* Main menu */
+
+/* Hide separators - no longer needed as the menu group headers feature a delimiter line */
+.excalidraw .Island.dropdown-menu-container>div:not(:has(>*)) {
+    display: none;
+}
+
+/* Menu group header */
+.excalidraw .dropdown-menu-container .dropdown-menu-group-title,
+.excalidraw .Island.dropdown-menu-container div[data-testid="canvas-background-label"] {
+    margin: 0 !important;
+}
+
 /* Panels */
 
 .excalidraw .Island:not(.App-menu__left),

From e9aa37d049ed6ec9a72e1967138c5279a4b2eb4f Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 15 Oct 2025 19:10:03 +0300
Subject: [PATCH 13/19] style/canvas: tweak the header region of the UI

---
 .../stylesheets/theme-next/notes/canvas.css   | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/stylesheets/theme-next/notes/canvas.css b/apps/client/src/stylesheets/theme-next/notes/canvas.css
index de7aa1173..7f770fab9 100644
--- a/apps/client/src/stylesheets/theme-next/notes/canvas.css
+++ b/apps/client/src/stylesheets/theme-next/notes/canvas.css
@@ -26,7 +26,7 @@
 }
 
 :root .type-canvas {
-    --floating-buttons-vert-offset: 48px;
+    --floating-buttons-vert-offset: 20px;
 }
 
 /* Context menus */
@@ -95,6 +95,17 @@
     margin: 0 !important;
 }
 
+/* Header */
+
+.excalidraw .App-menu.App-menu_top {
+    align-items: center;
+}
+
+/* The parent element of the "Library" button  */
+.excalidraw .App-menu.App-menu_top > div:nth-child(3) {
+    flex-direction: row-reverse;
+}
+
 /* Panels */
 
 .excalidraw .Island:not(.App-menu__left),
@@ -175,4 +186,11 @@ body[dir=ltr] .excalidraw .exc-stats {
 
 body[dir=ltr] .excalidraw .exc-stats {
     right: 0;
+}
+
+/* Sidebar */
+
+.split-note-container-widget > .component.type-canvas:has(.excalidraw-container > .Island.default-sidebar) > .floating-buttons {
+    /* Hide the floating buttons when the sidebar is open */
+    display: none;
 }
\ No newline at end of file

From b6045e0831d312c1d64f5aabe25d1e2bb19be190 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 15 Oct 2025 19:19:59 +0300
Subject: [PATCH 14/19] style/canvas: fix a layout glitch

---
 apps/client/src/stylesheets/theme-next/notes/canvas.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/apps/client/src/stylesheets/theme-next/notes/canvas.css b/apps/client/src/stylesheets/theme-next/notes/canvas.css
index 7f770fab9..fd067adea 100644
--- a/apps/client/src/stylesheets/theme-next/notes/canvas.css
+++ b/apps/client/src/stylesheets/theme-next/notes/canvas.css
@@ -101,6 +101,11 @@
     align-items: center;
 }
 
+.excalidraw .App-menu.App-menu_top > .selected-shape-actions {
+    /* Fixes a layout glitch with the header when the options panel is visbile */
+    gap: 0;
+}
+
 /* The parent element of the "Library" button  */
 .excalidraw .App-menu.App-menu_top > div:nth-child(3) {
     flex-direction: row-reverse;

From 6ba4b063f6000be5be759a80e59334f8966bcd14 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 15 Oct 2025 19:45:20 +0300
Subject: [PATCH 15/19] style/canvas: fix a layout glitch

---
 apps/client/src/stylesheets/theme-next/notes/canvas.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/stylesheets/theme-next/notes/canvas.css b/apps/client/src/stylesheets/theme-next/notes/canvas.css
index fd067adea..302072f18 100644
--- a/apps/client/src/stylesheets/theme-next/notes/canvas.css
+++ b/apps/client/src/stylesheets/theme-next/notes/canvas.css
@@ -101,9 +101,9 @@
     align-items: center;
 }
 
-.excalidraw .App-menu.App-menu_top > .selected-shape-actions {
+.excalidraw .App-menu.App-menu_top .App-menu_top__left {
     /* Fixes a layout glitch with the header when the options panel is visbile */
-    gap: 0;
+    --gap: 0 !important;
 }
 
 /* The parent element of the "Library" button  */

From b9db6128cf7e5f1e8c853b0a62a321cabedb4f6d Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 15 Oct 2025 20:56:59 +0300
Subject: [PATCH 16/19] style/canvas: tweak the dark theme

---
 .../stylesheets/theme-next/notes/canvas.css    | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/apps/client/src/stylesheets/theme-next/notes/canvas.css b/apps/client/src/stylesheets/theme-next/notes/canvas.css
index 302072f18..370d1f99e 100644
--- a/apps/client/src/stylesheets/theme-next/notes/canvas.css
+++ b/apps/client/src/stylesheets/theme-next/notes/canvas.css
@@ -25,6 +25,24 @@
 
 }
 
+/* Dark theme tweaks */
+
+:root body .excalidraw.theme--dark {
+    --color-surface-high: transparent;
+    --color-brand-hover: transparent;
+}
+
+:root .excalidraw.theme--dark.excalidraw .App-mobile-menu,
+:root .excalidraw.theme--dark.excalidraw .App-menu__left {
+    --button-hover-bg: var(--hover-item-background-color);
+}
+
+:root .excalidraw.theme--dark.excalidraw .dropdown-menu-button:hover {
+    --background: var(--hover-item-background-color);
+}
+
+/* Note's root */
+
 :root .type-canvas {
     --floating-buttons-vert-offset: 20px;
 }

From 89c81f74b48822104ff08f301f3499f908c89528 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 15 Oct 2025 21:20:41 +0300
Subject: [PATCH 17/19] style/canvas: restyle sliders

---
 apps/client/src/stylesheets/theme-next/notes/canvas.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/apps/client/src/stylesheets/theme-next/notes/canvas.css b/apps/client/src/stylesheets/theme-next/notes/canvas.css
index 370d1f99e..601ae8eba 100644
--- a/apps/client/src/stylesheets/theme-next/notes/canvas.css
+++ b/apps/client/src/stylesheets/theme-next/notes/canvas.css
@@ -13,6 +13,10 @@
     --color-surface-mid: transparent;
     --color-surface-low: transparent;
 
+    /* Slider colors */
+    --color-slider-track: var(--menu-item-delimiter-color);
+    --color-slider-thumb: var(--muted-text-color);
+
     /* Selected button icon fill color */
     --color-on-primary-container: var(--ck-editor-toolbar-button-on-color);
     --color-primary: var(--ck-editor-toolbar-button-on-color);
@@ -41,6 +45,7 @@
     --background: var(--hover-item-background-color);
 }
 
+
 /* Note's root */
 
 :root .type-canvas {

From 7ed82f95274de7daca6f6f1bbac2007fd7d951ae Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 15 Oct 2025 21:35:50 +0300
Subject: [PATCH 18/19] style/canvas/context menu items: apply the right color
 for icons

---
 apps/client/src/stylesheets/theme-next/notes/canvas.css | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/stylesheets/theme-next/notes/canvas.css b/apps/client/src/stylesheets/theme-next/notes/canvas.css
index 601ae8eba..2efb9707b 100644
--- a/apps/client/src/stylesheets/theme-next/notes/canvas.css
+++ b/apps/client/src/stylesheets/theme-next/notes/canvas.css
@@ -83,7 +83,12 @@
     border: 1px solid transparent;
 }
 
-/* Context menu label */
+/* Context menu item icon */
+:root .excalidraw .dropdown-menu-item__icon {
+    color: var(--menu-item-icon-color);
+}
+
+/* Context menu item label */
 :root .excalidraw .context-menu-item__label,
 :root .excalidraw .context-menu-item.dangerous .context-menu-item__label {
     color: var(--menu-text-color);

From a2f0ec6445c1006fd1fdf8d5aa465cd3af9ad117 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 15 Oct 2025 21:54:46 +0300
Subject: [PATCH 19/19] style/canvas: fix the issues pointed by
 gemini-code-assist

---
 apps/client/src/stylesheets/theme-next/notes/canvas.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/stylesheets/theme-next/notes/canvas.css b/apps/client/src/stylesheets/theme-next/notes/canvas.css
index 2efb9707b..a7e224720 100644
--- a/apps/client/src/stylesheets/theme-next/notes/canvas.css
+++ b/apps/client/src/stylesheets/theme-next/notes/canvas.css
@@ -156,7 +156,7 @@
 
 /* Selected color outline */
 :root .excalidraw .color-picker__button.active .color-picker__button-outline {
-    box-shadow: 0 0 0 2px var(--input-focus-outline-color)
+    box-shadow: 0 0 0 2px var(--input-focus-outline-color);
 }
 
 :root .excalidraw .buttonList label.active {
@@ -217,7 +217,7 @@ body[dir=ltr] .excalidraw .exc-stats {
     left: 0;
 }
 
-body[dir=ltr] .excalidraw .exc-stats {
+body[dir=rtl] .excalidraw .exc-stats {
     right: 0;
 }