diff --git a/src/app.css b/src/app.css index cbaddda..1aa878f 100644 --- a/src/app.css +++ b/src/app.css @@ -105,65 +105,6 @@ body { & > div { display: contents; } - - .menu-item { - padding: .5em 1em; - - background-color: inherit; - color: var(--text-1); - border: none; - cursor: pointer; - - text-align: start; - - &:hover { - background-color: var(--surface-2); - } - } - - .menu-child { - position: fixed; - inset-inline-start: anchor(self-start); - inset-block-start: anchor(end); - - grid-template-columns: auto auto; - place-content: start; - - gap: .5em; - padding: .5em 0; - inline-size: max-content; - - background-color: var(--surface-2); - border: 1px solid var(--surface-3); - border-block-start-width: 0; - margin: unset; - - &:popover-open { - display: grid; - } - - & > .menu-item { - grid-column: span 2; - display: grid; - grid-template-columns: subgrid; - align-items: center; - - background-color: var(--surface-2); - - &:hover { - background-color: var(--surface-3); - } - - & > sub { - color: var(--text-2); - text-align: end; - } - } - } - - :popover-open + .menu-item { - background-color: var(--surface-2); - } } } diff --git a/src/features/command/contextMenu.module.css b/src/features/command/contextMenu.module.css index f2c38f4..aa37226 100644 --- a/src/features/command/contextMenu.module.css +++ b/src/features/command/contextMenu.module.css @@ -1,15 +1,31 @@ .menu { position: fixed; display: grid; - grid-template-columns: max-content; + grid-template-columns: auto auto; + place-content: start; inset-inline-start: anchor(start); inset-block-start: anchor(end); + margin: 0; + gap: var(--padding-m); + padding: var(--padding-m); + font-size: var(--text-s); background-color: var(--surface-1); color: var(--text-1); - border: none; + border: 1px solid var(--text-1); + border-radius: var(--radii-m); - padding: var(--padding-m); + & > li { + grid-column: span 2; + display: grid; + grid-template-columns: subgrid; + align-items: center; + + & > sub { + color: var(--text-2); + text-align: end; + } + } } \ No newline at end of file diff --git a/src/features/menu/index.module.css b/src/features/menu/index.module.css index 6638b08..4ad4841 100644 --- a/src/features/menu/index.module.css +++ b/src/features/menu/index.module.css @@ -21,8 +21,8 @@ grid-template-columns: auto auto; place-content: start; - gap: .5em; - padding: .5em 0; + gap: var(--padding-m); + padding: var(--padding-m) 0; inline-size: max-content; background-color: var(--surface-2); diff --git a/src/routes/(editor)/edit.tsx b/src/routes/(editor)/edit.tsx index 8d47642..f9b36e7 100644 --- a/src/routes/(editor)/edit.tsx +++ b/src/routes/(editor)/edit.tsx @@ -117,6 +117,9 @@ export default function Edit(props: ParentProps) { selectAll: createCommand('select all', () => { api()?.selectAll(); }, { key: 'a', modifier: Modifier.Control }), + clearSelection: createCommand('clear selection', () => { + api()?.clear(); + }), } as const; const mutated = createMemo(() => Object.values(api()?.rows() ?? {}).filter(row => Object.values(row).some(lang => lang.original !== lang.value))); @@ -144,6 +147,8 @@ export default function Edit(props: ParentProps) {