style/canvas: improve context menus

This commit is contained in:
Adorian Doran 2025-10-15 13:10:23 +03:00
parent 93af4f24e5
commit 46901cf3fb
3 changed files with 26 additions and 13 deletions

View File

@ -420,7 +420,7 @@ body.desktop .tabulator-popup-container,
.dropdown-menu a:hover:not(.disabled), .dropdown-menu a:hover:not(.disabled),
.dropdown-item:hover:not(.disabled, .dropdown-container-item), .dropdown-item:hover:not(.disabled, .dropdown-container-item),
.tabulator-menu-item:hover, .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; color: var(--hover-item-text-color) !important;
background-color: var(--hover-item-background-color) !important; background-color: var(--hover-item-background-color) !important;
border-color: var(--hover-item-border-color) !important; border-color: var(--hover-item-border-color) !important;
@ -462,7 +462,7 @@ body #context-menu-container .dropdown-item > span {
.dropdown-item, .dropdown-item,
.dropdown-header, .dropdown-header,
:root .excalidraw .popover .context-menu-item:hover { :root .excalidraw .context-menu .context-menu-item:hover {
color: var(--menu-text-color) !important; color: var(--menu-text-color) !important;
border: 1px solid transparent !important; border: 1px solid transparent !important;
} }

View File

@ -152,7 +152,7 @@ body.desktop .dropdown-submenu .dropdown-menu {
.dropdown-item, .dropdown-item,
body.mobile .dropdown-submenu .dropdown-toggle, 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: 2px 2px 2px 8px !important;
padding-inline-end: 22px !important; padding-inline-end: 22px !important;
/* Note: the right padding should also accommodate the submenu arrow. */ /* Note: the right padding should also accommodate the submenu arrow. */
@ -206,7 +206,8 @@ html body .dropdown-item[disabled] {
} }
/* Menu item keyboard shortcut */ /* Menu item keyboard shortcut */
.dropdown-item kbd { .dropdown-item kbd,
.excalidraw .context-menu-item__shortcut {
font-family: unset !important; font-family: unset !important;
font-size: unset !important; font-size: unset !important;
color: var(--menu-item-keyboard-shortcut-color) !important; color: var(--menu-item-keyboard-shortcut-color) !important;

View File

@ -30,34 +30,46 @@
} }
/* Context menus */ /* Context menus */
/* Context menu - outer wrapper */
:root .excalidraw .popover { :root .excalidraw .popover {
padding: 0;
max-width: unset; max-width: unset;
font-family: var(--main-font-family);
overflow: hidden !important; overflow: hidden !important;
padding: 0;
font-family: var(--main-font-family);
} }
:root .excalidraw .popover > * { /* Context menu - inner wrapper */
height: 100%; :root .excalidraw .popover > .context-menu {
margin: 0; margin: 0;
border: none;
padding: 0;
background: transparent;
box-shadow: none;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; 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; border: 1px solid transparent;
padding-left: 16px !important; 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 { .excalidraw .context-menu .context-menu-item-separator {
margin: 8px 0; margin: 8px 0;
opacity: 1; opacity: 1;
} }
/* Panels */
.excalidraw .Island:not(.App-menu__left), .excalidraw .Island:not(.App-menu__left),
.excalidraw .zoom-actions, .excalidraw .zoom-actions,