Merge pull request #114 from nextcloud/feat/styling-right-click-menu

Feat/styling right click menu

Author: juliusknorr

src/App.scss

@@ -4,7 +4,8 @@
  */
 
 // https://github.com/excalidraw/excalidraw/blob/4dc4590f247a0a0d9c3f5d39fe09c00c5cef87bf/examples/excalidraw
-.excalidraw, .App .excalidraw {
+.excalidraw,
+.App .excalidraw {
   --zIndex-modal: 100010;
   --zIndex-popup: 100020;
   --ui-font: var(--font-face);
@@ -34,15 +35,15 @@
   }
 }
 
-.widgets--list{
+.widgets--list {
   height: 100%;
 }
 
-.widgets--list > div{
+.widgets--list > div {
   height: 100% !important;
 }
 
-.widgets--list > div > div{
+.widgets--list > div > div {
   height: 100% !important;
 }
 
@@ -51,13 +52,13 @@
   margin: 0 !important;
 }
 
-.widget-file--interactive{
+.widget-file--interactive {
   height: 100% !important;
   max-height: 100% !important;
   min-height: unset !important;
 }
 
-.text-menubar--ready{
+.text-menubar--ready {
   backdrop-filter: unset !important;
   -webkit-backdrop-filter: unset !important;
 }
@@ -74,7 +75,7 @@
   overflow: hidden;
 }
 
-:root[dir="ltr"]
+:root[dir='ltr']
   .excalidraw
   .layer-ui__wrapper
   .zen-mode-transition.App-menu_bottom--transition-left {
@@ -95,7 +96,7 @@
   }
 }
 
-.layer-ui__wrapper__top-right label[title=Library] {
+.layer-ui__wrapper__top-right label[title='Library'] {
   display: none;
 }
 
@@ -107,3 +108,41 @@
 .excalidraw .RadioGroup__choice input {
   opacity: 0;
 }
+
+// Custom Context Menu
+.excalidraw .context-menu-item__label {
+  font-weight: normal !important;
+}
+
+.excalidraw .context-menu {
+  position: relative !important;
+  border-radius: var(--border-radius-large) !important;
+  box-shadow: none !important;
+  filter: drop-shadow(0 calc(var(--default-grid-baseline) / 4) calc(var(--default-grid-baseline) * 2.5) var(--color-box-shadow)) !important;
+  list-style: none !important;
+  -webkit-user-select: none !important;
+  user-select: none !important;
+  margin: calc(var(--default-grid-baseline) * -1) 0 0 calc(var(--default-grid-baseline) / 2) !important;
+  padding: calc(var(--default-grid-baseline)) calc(var(--default-grid-baseline)) !important;
+  background-color: var(--color-main-background) !important;
+  cursor: default !important;
+  border: none !important;
+}
+
+.excalidraw .context-menu-item-separator {
+  border-top: calc(var(--default-grid-baseline) / 8) solid var(--color-border) !important;
+  margin-top: calc(var(--default-grid-baseline)) !important;
+  margin-bottom: calc(var(--default-grid-baseline)) !important;
+}
+
+.excalidraw .context-menu-item {
+  color: var(--popup-text-color) !important;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  padding-left: calc(var(--default-grid-baseline) * 3) !important;
+}
+
+.excalidraw .context-menu-item:hover {
+  background-color: var(--color-background-hover) !important;
+  border-radius: var(--border-radius-large) !important;
+}