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 {