diff --git a/CHANGELOG.md b/CHANGELOG.md index 63c2851bc..2a830190d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,7 @@ and this project adheres to - 🐛(frontend) preserve @ character when esc is pressed after typing it #1512 - 🐛(frontend) make summary button fixed to remain visible during scroll #1581 - 🐛(frontend) fix pdf embed to use full width #1526 +- 🐛(frontend) fix alignment of side menu #1597 - 🐛(frontend) fix fallback translations with Trans #1620 - 🐛(export) fix image overflow by limiting width to 600px during export #1525 - 🐛(export) fix table cell alignment issue in exported documents #1582 diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx index 3bade52bc..374b67745 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx @@ -7,153 +7,151 @@ export const cssEditor = css` height: 100%; } - & .ProseMirror { - /** - * WCAG Accessibility contrast fixes for BlockNote editor - */ - .bn-block-content[data-is-empty-and-focused][data-content-type='paragraph'] - .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before { - color: #767676 !important; - font-weight: 400; - } + & .bn-editor { + color: var(--c--theme--colors--greyscale-700); + } - /** - * Ensure long placeholder text is truncated with ellipsis - */ - .bn-block-content[data-is-empty-and-focused][data-content-type='paragraph'] - .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - width: inherit; - height: inherit; - } - .bn-block-content[data-is-empty-and-focused][data-content-type='paragraph'] - .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child) { - position: relative; - } + /** + * WCAG Accessibility contrast fixes for BlockNote editor + */ + .bn-block-content[data-is-empty-and-focused][data-content-type='paragraph'] + .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before { + color: #767676 !important; + font-weight: 400; + } - /** - * Ensure images with unsafe URLs are not interactive - */ - img.bn-visual-media[src*='-unsafe'] { - pointer-events: none; - } + /** + * Ensure long placeholder text is truncated with ellipsis + */ + .bn-block-content[data-is-empty-and-focused][data-content-type='paragraph'] + .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + width: inherit; + height: inherit; + } + .bn-block-content[data-is-empty-and-focused][data-content-type='paragraph'] + .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child) { + position: relative; + } - /** - * Collaboration cursor styles - */ - .collaboration-cursor-custom__base { - position: relative; - } - .collaboration-cursor-custom__caret { - position: absolute; - height: 100%; - width: 2px; - bottom: 4%; - left: -1px; - } + /** + * Ensure images with unsafe URLs are not interactive + */ + img.bn-visual-media[src*='-unsafe'] { + pointer-events: none; + } + + /** + * Collaboration cursor styles + */ + .collaboration-cursor-custom__base { + position: relative; + } + .collaboration-cursor-custom__caret { + position: absolute; + height: 100%; + width: 2px; + bottom: 4%; + left: -1px; + } + .collaboration-cursor-custom__label { + color: #0d0d0d; + font-size: 12px; + font-weight: 600; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + position: absolute; + top: -17px; + left: 0px; + padding: 0px 6px; + border-radius: 0px; + white-space: nowrap; + transition: clip-path 0.3s ease-in-out; + border-radius: 4px 4px 4px 0; + box-shadow: inset -2px 2px 6px #ffffff00; + clip-path: polygon(0 85%, 4% 85%, 4% 100%, 0% 100%); + } + .collaboration-cursor-custom__base[data-active] .collaboration-cursor-custom__label { - color: #0d0d0d; - font-size: 12px; - font-weight: 600; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - position: absolute; - top: -17px; - left: 0px; - padding: 0px 6px; - border-radius: 0px; - white-space: nowrap; - transition: clip-path 0.3s ease-in-out; - border-radius: 4px 4px 4px 0; - box-shadow: inset -2px 2px 6px #ffffff00; - clip-path: polygon(0 85%, 4% 85%, 4% 100%, 0% 100%); - } - .collaboration-cursor-custom__base[data-active] - .collaboration-cursor-custom__label { - pointer-events: none; - box-shadow: inset -2px 2px 6px #ffffff88; - clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%); - } + pointer-events: none; + box-shadow: inset -2px 2px 6px #ffffff88; + clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%); + } - /** - * Side menu - */ - .bn-side-menu[data-block-type='heading'][data-level='1'] { - height: 50px; - } - .bn-side-menu[data-block-type='heading'][data-level='2'] { - height: 43px; - } - .bn-side-menu[data-block-type='heading'][data-level='3'] { - height: 35px; - } - .bn-side-menu[data-block-type='divider'] { - height: 38px; - } - .bn-side-menu .mantine-UnstyledButton-root svg { - color: #767676 !important; - } + /** + * Side menu + */ + .bn-side-menu[data-block-type='heading'][data-level='1'] { + height: 54px; + } + .bn-side-menu[data-block-type='heading'][data-level='2'] { + height: 43px; + } + .bn-side-menu[data-block-type='heading'][data-level='3'] { + height: 35px; + } + .bn-side-menu[data-block-type='divider'] { + height: 38px; + } + .bn-side-menu .mantine-UnstyledButton-root svg { + color: #767676 !important; + } - /** - * Callout, Paragraph and Heading blocks - */ - .bn-block { - border-radius: var(--c--theme--spacings--3xs); - } - .bn-block-outer { - border-radius: var(--c--theme--spacings--3xs); - } - .bn-block > .bn-block-content[data-background-color] { - padding: var(--c--theme--spacings--3xs) var(--c--theme--spacings--3xs); - border-radius: var(--c--theme--spacings--3xs); - } - .bn-block-content[data-content-type='checkListItem'][data-checked='true'] - .bn-inline-content { - text-decoration: none; - } - h1 { - font-size: 1.875rem; - } - h2 { - font-size: 1.5rem; - } - h3 { - font-size: 1.25rem; - } - a { - color: var(--c--theme--colors--greyscale-600); - cursor: pointer; - } + /** + * Callout, Paragraph and Heading blocks + */ + .bn-block { + border-radius: var(--c--theme--spacings--3xs); + } + .bn-block-outer { + border-radius: var(--c--theme--spacings--3xs); + } + .bn-block > .bn-block-content[data-background-color] { + padding: var(--c--theme--spacings--3xs) var(--c--theme--spacings--3xs); + border-radius: var(--c--theme--spacings--3xs); + } + .bn-block-content[data-content-type='checkListItem'][data-checked='true'] + .bn-inline-content { + text-decoration: none; + } + h1 { + font-size: 1.875rem; + } + h2 { + font-size: 1.5rem; + } + h3 { + font-size: 1.25rem; + } + a { + color: var(--c--theme--colors--greyscale-600); + cursor: pointer; + } + .bn-block-group .bn-block-group - .bn-block-group - .bn-block-outer:not([data-prev-depth-changed]):before { - border-left: none; - } + .bn-block-outer:not([data-prev-depth-changed]):before { + border-left: none; } - & .bn-editor { - color: var(--c--theme--colors--greyscale-700); - - /** - * Quotes - */ - blockquote { - border-left: 4px solid var(--c--theme--colors--greyscale-300); - font-style: italic; - } + /** + * Quotes + */ + blockquote { + border-left: 4px solid var(--c--theme--colors--greyscale-300); + font-style: italic; + } - /** - * Divider - */ - [data-content-type='divider'] hr { - background: #d3d2cf; - margin: 1rem 0; - width: 100%; - border: 1px solid #d3d2cf; - } + /** + * Divider + */ + [data-content-type='divider'] hr { + background: #d3d2cf; + margin: 1rem 0; + width: 100%; + border: 1px solid #d3d2cf; } & .bn-block-outer:not(:first-child) {