252 lines
9.8 KiB
CSS
252 lines
9.8 KiB
CSS
/* ==============================================
|
|
EditorTheme.css — BlockNote theme overrides
|
|
Driven by CSS custom properties from theme.json
|
|
============================================== */
|
|
|
|
/* --- Editor root --- */
|
|
.editor__blocknote-container .bn-editor {
|
|
font-family: var(--editor-font-family);
|
|
font-size: var(--editor-font-size);
|
|
line-height: var(--editor-line-height);
|
|
max-width: var(--editor-max-width);
|
|
padding: var(--editor-padding-vertical) var(--editor-padding-horizontal);
|
|
color: var(--colors-text);
|
|
caret-color: var(--colors-cursor);
|
|
}
|
|
|
|
/* Override BlockNote's default line-height on block-outer so our theme controls it */
|
|
.editor__blocknote-container .bn-block-outer {
|
|
line-height: var(--editor-line-height) !important;
|
|
}
|
|
|
|
/* Stack handle buttons horizontally instead of vertically to reduce height,
|
|
so they fit within a single text line for headings and paragraphs. */
|
|
.editor__blocknote-container .bn-side-menu {
|
|
--group-wrap: nowrap !important;
|
|
flex-direction: row !important;
|
|
flex-wrap: nowrap !important;
|
|
gap: 0 !important;
|
|
}
|
|
|
|
.editor__blocknote-container .bn-editor ::selection {
|
|
background: var(--colors-selection);
|
|
}
|
|
|
|
/* --- Paragraph spacing --- */
|
|
.editor__blocknote-container .bn-block-content[data-content-type="paragraph"] {
|
|
margin-bottom: var(--editor-paragraph-spacing);
|
|
}
|
|
|
|
/* --- Headings --- */
|
|
/* Heading spacing: use margin-top on .bn-block-outer (creates space between blocks)
|
|
and ensure the handle aligns by NOT adding padding/margin on inner elements.
|
|
BlockNote positions handles via JS based on .bn-block-content bounding rect. */
|
|
|
|
.editor__blocknote-container .bn-block-outer:has(> .bn-block > [data-content-type="heading"][data-level="1"]) {
|
|
margin-top: var(--headings-h1-margin-top) !important;
|
|
margin-bottom: var(--headings-h1-margin-bottom) !important;
|
|
}
|
|
.editor__blocknote-container [data-content-type="heading"][data-level="1"] .bn-inline-content {
|
|
font-size: var(--headings-h1-font-size);
|
|
font-weight: var(--headings-h1-font-weight);
|
|
line-height: var(--headings-h1-line-height);
|
|
color: var(--headings-h1-color);
|
|
letter-spacing: var(--headings-h1-letter-spacing);
|
|
}
|
|
|
|
.editor__blocknote-container .bn-block-outer:has(> .bn-block > [data-content-type="heading"][data-level="2"]) {
|
|
margin-top: var(--headings-h2-margin-top) !important;
|
|
margin-bottom: var(--headings-h2-margin-bottom) !important;
|
|
}
|
|
.editor__blocknote-container [data-content-type="heading"][data-level="2"] .bn-inline-content {
|
|
font-size: var(--headings-h2-font-size);
|
|
font-weight: var(--headings-h2-font-weight);
|
|
line-height: var(--headings-h2-line-height);
|
|
color: var(--headings-h2-color);
|
|
letter-spacing: var(--headings-h2-letter-spacing);
|
|
}
|
|
|
|
.editor__blocknote-container .bn-block-outer:has(> .bn-block > [data-content-type="heading"][data-level="3"]) {
|
|
margin-top: var(--headings-h3-margin-top) !important;
|
|
margin-bottom: var(--headings-h3-margin-bottom) !important;
|
|
}
|
|
.editor__blocknote-container [data-content-type="heading"][data-level="3"] .bn-inline-content {
|
|
font-size: var(--headings-h3-font-size);
|
|
font-weight: var(--headings-h3-font-weight);
|
|
line-height: var(--headings-h3-line-height);
|
|
color: var(--headings-h3-color);
|
|
letter-spacing: var(--headings-h3-letter-spacing);
|
|
}
|
|
|
|
.editor__blocknote-container .bn-block-outer:has(> .bn-block > [data-content-type="heading"][data-level="4"]) {
|
|
margin-top: var(--headings-h4-margin-top) !important;
|
|
margin-bottom: var(--headings-h4-margin-bottom) !important;
|
|
}
|
|
.editor__blocknote-container [data-content-type="heading"][data-level="4"] .bn-inline-content {
|
|
font-size: var(--headings-h4-font-size);
|
|
font-weight: var(--headings-h4-font-weight);
|
|
line-height: var(--headings-h4-line-height);
|
|
color: var(--headings-h4-color);
|
|
letter-spacing: var(--headings-h4-letter-spacing);
|
|
}
|
|
|
|
/* --- Bullet lists --- */
|
|
/* BlockNote renders bullet as ::before on [data-content-type="bulletListItem"]
|
|
with content: "•", display: flex, width: 24px */
|
|
.editor__blocknote-container [data-content-type="bulletListItem"] {
|
|
padding-left: var(--lists-padding-left);
|
|
margin-bottom: var(--lists-item-spacing);
|
|
gap: var(--lists-bullet-gap) !important;
|
|
}
|
|
|
|
.editor__blocknote-container [data-content-type="bulletListItem"]::before {
|
|
font-size: var(--lists-bullet-size) !important;
|
|
color: var(--lists-bullet-color) !important;
|
|
min-width: var(--lists-indent-size) !important;
|
|
width: var(--lists-indent-size) !important;
|
|
/* Align bullet with first line of text */
|
|
height: calc(var(--editor-font-size) * var(--editor-line-height)) !important;
|
|
align-items: center !important;
|
|
flex-shrink: 0 !important;
|
|
}
|
|
|
|
/* Nested list indentation */
|
|
.editor__blocknote-container .bn-block-group .bn-block-group {
|
|
margin-left: var(--lists-indent-size);
|
|
}
|
|
|
|
/* --- Numbered lists --- */
|
|
.editor__blocknote-container [data-content-type="numberedListItem"] {
|
|
padding-left: var(--lists-padding-left);
|
|
margin-bottom: var(--lists-item-spacing);
|
|
gap: var(--lists-bullet-gap) !important;
|
|
}
|
|
|
|
.editor__blocknote-container [data-content-type="numberedListItem"]::before {
|
|
color: var(--lists-bullet-color) !important;
|
|
font-size: var(--editor-font-size) !important;
|
|
min-width: var(--lists-indent-size) !important;
|
|
width: var(--lists-indent-size) !important;
|
|
height: calc(var(--editor-font-size) * var(--editor-line-height)) !important;
|
|
align-items: center !important;
|
|
flex-shrink: 0 !important;
|
|
}
|
|
|
|
/* --- Checkbox / check list items --- */
|
|
/* BlockNote renders checkbox as: div > input[type=checkbox] inside .bn-block-content */
|
|
.editor__blocknote-container [data-content-type="checkListItem"] {
|
|
margin-bottom: var(--lists-item-spacing);
|
|
gap: var(--checkboxes-gap) !important;
|
|
}
|
|
|
|
.editor__blocknote-container [data-content-type="checkListItem"] input[type="checkbox"] {
|
|
width: var(--checkboxes-size) !important;
|
|
height: var(--checkboxes-size) !important;
|
|
min-width: var(--checkboxes-size) !important;
|
|
min-height: var(--checkboxes-size) !important;
|
|
border-radius: var(--checkboxes-border-radius) !important;
|
|
accent-color: var(--checkboxes-checked-color) !important;
|
|
border-color: var(--checkboxes-unchecked-border-color) !important;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Checkbox container div — control spacing, align to first line */
|
|
.editor__blocknote-container [data-content-type="checkListItem"] > div[contenteditable="false"] {
|
|
width: var(--lists-indent-size) !important;
|
|
min-width: var(--lists-indent-size) !important;
|
|
height: calc(var(--editor-font-size) * var(--editor-line-height)) !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
flex-shrink: 0 !important;
|
|
}
|
|
|
|
/* --- Inline: bold --- */
|
|
.editor__blocknote-container .bn-editor strong {
|
|
font-weight: var(--inline-styles-bold-font-weight);
|
|
color: var(--inline-styles-bold-color);
|
|
}
|
|
|
|
/* --- Inline: italic --- */
|
|
.editor__blocknote-container .bn-editor em {
|
|
font-style: var(--inline-styles-italic-font-style);
|
|
color: var(--inline-styles-italic-color);
|
|
}
|
|
|
|
/* --- Inline: strikethrough --- */
|
|
.editor__blocknote-container .bn-editor s,
|
|
.editor__blocknote-container .bn-editor del {
|
|
color: var(--inline-styles-strikethrough-color);
|
|
text-decoration: var(--inline-styles-strikethrough-text-decoration);
|
|
}
|
|
|
|
/* --- Inline: code --- */
|
|
.editor__blocknote-container .bn-editor code {
|
|
font-family: var(--inline-styles-code-font-family);
|
|
font-size: var(--inline-styles-code-font-size);
|
|
background-color: var(--inline-styles-code-background-color);
|
|
padding: var(--inline-styles-code-padding-vertical) var(--inline-styles-code-padding-horizontal);
|
|
border-radius: var(--inline-styles-code-border-radius);
|
|
color: var(--inline-styles-code-color);
|
|
}
|
|
|
|
/* --- Inline: links --- */
|
|
.editor__blocknote-container .bn-editor a {
|
|
color: var(--inline-styles-link-color);
|
|
text-decoration: var(--inline-styles-link-text-decoration);
|
|
}
|
|
|
|
/* --- Wikilinks (override from Editor.css with theme vars) --- */
|
|
.editor__blocknote-container .wikilink {
|
|
color: var(--inline-styles-wikilink-color);
|
|
text-decoration: var(--inline-styles-wikilink-text-decoration);
|
|
border-bottom: var(--inline-styles-wikilink-border-bottom);
|
|
cursor: var(--inline-styles-wikilink-cursor);
|
|
}
|
|
|
|
/* --- Code blocks --- */
|
|
.editor__blocknote-container [data-content-type="codeBlock"] {
|
|
font-family: var(--code-blocks-font-family);
|
|
font-size: var(--code-blocks-font-size);
|
|
line-height: var(--code-blocks-line-height);
|
|
background-color: var(--code-blocks-background-color);
|
|
padding: var(--code-blocks-padding-vertical) var(--code-blocks-padding-horizontal);
|
|
border-radius: var(--code-blocks-border-radius);
|
|
margin-top: var(--code-blocks-margin-vertical);
|
|
margin-bottom: var(--code-blocks-margin-vertical);
|
|
}
|
|
|
|
/* --- Blockquote --- */
|
|
.editor__blocknote-container [data-content-type="blockquote"],
|
|
.editor__blocknote-container blockquote {
|
|
border-left: var(--blockquote-border-left-width) solid var(--blockquote-border-left-color);
|
|
padding-left: var(--blockquote-padding-left);
|
|
margin-top: var(--blockquote-margin-vertical);
|
|
margin-bottom: var(--blockquote-margin-vertical);
|
|
color: var(--blockquote-color);
|
|
font-style: var(--blockquote-font-style);
|
|
}
|
|
|
|
/* --- Table --- */
|
|
.editor__blocknote-container [data-content-type="table"] table {
|
|
border-color: var(--table-border-color);
|
|
font-size: var(--table-font-size);
|
|
}
|
|
|
|
.editor__blocknote-container [data-content-type="table"] th {
|
|
background: var(--table-header-background);
|
|
padding: var(--table-cell-padding-vertical) var(--table-cell-padding-horizontal);
|
|
}
|
|
|
|
.editor__blocknote-container [data-content-type="table"] td {
|
|
padding: var(--table-cell-padding-vertical) var(--table-cell-padding-horizontal);
|
|
border-color: var(--table-border-color);
|
|
}
|
|
|
|
/* --- Horizontal rule --- */
|
|
.editor__blocknote-container hr {
|
|
border: none;
|
|
border-top: var(--horizontal-rule-thickness) solid var(--horizontal-rule-color);
|
|
margin: var(--horizontal-rule-margin-vertical) 0;
|
|
}
|