🐛(frontend) fix alignment of side menu
Recent refactoring moved the side menu position. This commit fixes its alignment.
This commit is contained in:
Anthony LC
@@ -20,6 +20,7 @@ and this project adheres to
|
|||||||
- 🐛(frontend) preserve @ character when esc is pressed after typing it #1512
|
- 🐛(frontend) preserve @ character when esc is pressed after typing it #1512
|
||||||
- 🐛(frontend) make summary button fixed to remain visible during scroll #1581
|
- 🐛(frontend) make summary button fixed to remain visible during scroll #1581
|
||||||
- 🐛(frontend) fix pdf embed to use full width #1526
|
- 🐛(frontend) fix pdf embed to use full width #1526
|
||||||
|
- 🐛(frontend) fix alignment of side menu #1597
|
||||||
- 🐛(frontend) fix fallback translations with Trans #1620
|
- 🐛(frontend) fix fallback translations with Trans #1620
|
||||||
- 🐛(export) fix image overflow by limiting width to 600px during export #1525
|
- 🐛(export) fix image overflow by limiting width to 600px during export #1525
|
||||||
- 🐛(export) fix table cell alignment issue in exported documents #1582
|
- 🐛(export) fix table cell alignment issue in exported documents #1582
|
||||||
|
|||||||
@@ -7,153 +7,151 @@ export const cssEditor = css`
|
|||||||
height: 100%;
|
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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 {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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-outer:not([data-prev-depth-changed]):before {
|
|
||||||
border-left: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& .bn-editor {
|
& .bn-editor {
|
||||||
color: var(--c--theme--colors--greyscale-700);
|
color: var(--c--theme--colors--greyscale-700);
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Quotes
|
* WCAG Accessibility contrast fixes for BlockNote editor
|
||||||
*/
|
*/
|
||||||
blockquote {
|
.bn-block-content[data-is-empty-and-focused][data-content-type='paragraph']
|
||||||
border-left: 4px solid var(--c--theme--colors--greyscale-300);
|
.bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before {
|
||||||
font-style: italic;
|
color: #767676 !important;
|
||||||
}
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Divider
|
* Ensure long placeholder text is truncated with ellipsis
|
||||||
*/
|
*/
|
||||||
[data-content-type='divider'] hr {
|
.bn-block-content[data-is-empty-and-focused][data-content-type='paragraph']
|
||||||
background: #d3d2cf;
|
.bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before {
|
||||||
margin: 1rem 0;
|
text-overflow: ellipsis;
|
||||||
width: 100%;
|
white-space: nowrap;
|
||||||
border: 1px solid #d3d2cf;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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 {
|
||||||
|
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: 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;
|
||||||
|
}
|
||||||
|
.bn-block-group
|
||||||
|
.bn-block-group
|
||||||
|
.bn-block-outer:not([data-prev-depth-changed]):before {
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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;
|
||||||
}
|
}
|
||||||
|
|
||||||
& .bn-block-outer:not(:first-child) {
|
& .bn-block-outer:not(:first-child) {
|
||||||
|
|||||||
Reference in New Issue
Block a user