@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .ProseMirror p span { font-family: inherit; } .ProseMirror span.math-inline { font-family: KaTeX_Main, Times New Roman, serif; } .ProseMirror { font-family: inherit; } .ProseMirror p.is-editor-empty::before { color: var(--placeholder); content: attr(data-placeholder); float: left; height: 0; pointer-events: none; } .ProseMirror p code { background-color: var(--background-secondary); } .ProseMirror:first-child { margin-top: 10px; } .ProseMirror hr { box-sizing: border-box; background-color: transparent; border-width: 0px; margin-block: 0px; cursor: pointer; position: relative; background-color: var(--separator); width: 100%; height: 5px; margin-top: 4px; margin-bottom: 4px; } .ProseMirror hr.ProseMirror-selectednode::after { border: 2px solid var(--accent); } .ProseMirror p code { background-color: var(--background); border: 1px solid var(--border); border-radius: 5px; padding: 3px 5px 0px 5px; font-family: ui-monospace, SFMono-Regular, SF Mono, Consolas, Liberation Mono, Menlo, monospace !important; font-size: 10pt !important; } .ProseMirror code > span { font-family: ui-monospace, SFMono-Regular, SF Mono, Consolas, Liberation Mono, Menlo, monospace !important; } .ProseMirror li p { margin: 0px; } .ProseMirror li { margin-bottom: 5px; } .ProseMirror li:last-of-type { margin-bottom: 0px; } .ProseMirror li:first-of-type { margin-top: 5px; } .ProseMirror ul.tasklist-content-wrapper { padding-left: 0px; } .ProseMirror ul ul, .ProseMirror ol ol { margin-top: 5px; padding-left: 15px; } .ProseMirror a { color: var(--accent); cursor: pointer; } .ProseMirror a[href^="nn://"]::before { display: inline-block; cursor: pointer; content: ""; background-size: 14px; width: 14px; height: 14px; background-color: var(--accent); mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTMgMWMtMS4xMSAwLTIgLjg5LTIgMnYxMWMwIDEuMTEuODkgMiAyIDJoMTFjMS4xMSAwIDItLjg5IDItMnYtM2gtMnYzSDNWM2gxMXYyaDJWM2MwLTEuMTEtLjg5LTItMi0yTTkgN2MtMS4xMSAwLTIgLjg5LTIgMnYzaDJWOWgxMXYxMUg5di0ySDd2MmMwIDEuMTEuODkgMiAyIDJoMTFjMS4xMSAwIDItLjg5IDItMlY5YzAtMS4xMS0uODktMi0yLTJ6Ii8+PC9zdmc+) no-repeat 50% 50%; mask-size: cover; margin-right: 2px; } .ProseMirror a:hover { filter: brightness(70%); } .ProseMirror > p[data-spacing="double"], .ProseMirror div.callout > p[data-spacing="double"], .ProseMirror blockquote > p[data-spacing="double"] { margin-top: 1em; /* By default double spaced paragraphs have no bottom margin */ margin-bottom: 0px; } /* Remove all margins for single spaced paragraphs */ .ProseMirror p[data-spacing="single"] { margin-top: 0px; margin-bottom: 0px; } .ProseMirror > div.codeblock-view-content-wrap, .ProseMirror > div.taskList-view-content-wrap, .ProseMirror > div.math-block.math-node { margin-top: 1em; margin-bottom: 1em; } .ProseMirror > div.embed-view-content-wrap { margin-top: calc(1em + 24px); margin-bottom: 1em; } .ProseMirror > div.table-view-content-wrap { margin-top: 1.6em; margin-bottom: 1em; } .ProseMirror a > span.image-view-content-wrap { display: inline-block; text-decoration: none !important; text-decoration-line: none !important; } .ProseMirror { position: relative; } .ProseMirror { word-wrap: break-word; white-space: pre-wrap; white-space: break-spaces; -webkit-font-variant-ligatures: none; font-variant-ligatures: none; font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */ } .ProseMirror [contenteditable="false"] { white-space: normal; } .ProseMirror [contenteditable="false"] [contenteditable="true"] { white-space: pre-wrap; } .ProseMirror pre { white-space: pre-wrap; } img.ProseMirror-separator { display: inline !important; border: none !important; margin: 0 !important; width: 1px !important; height: 1px !important; } .ProseMirror-gapcursor { display: none; pointer-events: none; position: absolute; margin: 0; } .ProseMirror-gapcursor:after { content: ""; display: block; position: absolute; top: -2px; width: 20px; border-top: 1px solid var(--paragraph); animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite; } @keyframes ProseMirror-cursor-blink { to { visibility: hidden; } } .ProseMirror-hideselection *::selection { background: transparent; color: var(--paragraph); } .ProseMirror-hideselection *::-moz-selection { background: transparent; color: var(--paragraph); } .ProseMirror-hideselection * { caret-color: transparent; } .ProseMirror-focused .ProseMirror-gapcursor { display: block; } .tippy-box[data-animation="fade"][data-state="hidden"] { opacity: 0; } .ProseMirror li.node-taskItem { list-style-type: none; } .ProseMirror table { border-collapse: collapse; margin: 0; overflow: hidden; table-layout: fixed; } .ProseMirror table td, .ProseMirror table th { border: 1px solid var(--border); box-sizing: border-box; min-width: 1em; padding: 7px 9px; position: relative; vertical-align: top; } .ProseMirror table .selectedCell { border-color: var(--accent); } .ProseMirror table td > *, .ProseMirror table th > * { margin-bottom: 0; } .ProseMirror table th { background-color: var(--background-secondary); font-weight: bold; text-align: left; } .ProseMirror table .selectedCell:after { background: var(--accent); content: ""; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; position: absolute; z-index: 2; opacity: 0.2; } .ProseMirror table .column-resize-handle { background-color: var(--accent); bottom: -2px; position: absolute; right: 0px; pointer-events: none; top: 0; width: 5px; } .ProseMirror table p { margin: 0; } .resize-cursor { cursor: ew-resize; cursor: col-resize; } .drop-cursor { background-color: var(--paragraph, var(--nn_primary_paragraph)) !important; } .search-result.selected, .search-result.selected::selection, .searching nn-search-result { background-color: var(--accent-secondary) !important; color: var(--accentForeground-secondary) !important; } .search-result { background-color: var(--shade-secondary); } /* .line-number-widget, .line-number::before { color: var(--codeFg); pointer-events: none; border-right: 1px solid currentColor; margin-right: 10px; padding-right: 10px; } .line-number::before { content: attr(data-line); } .line-number.active::before, .line-number-widget.active { color: var(--codeHighlight); } .line-number.active:after, .line-number-widget.active:after { content: " "; width: 100%; position: absolute; left: 0; pointer-events: none; background-color: var(--backdrop); } */ .hide-scrollbar::-webkit-scrollbar { display: none; } .ProseMirror blockquote { border-inline-start: 5px solid var(--border); padding-inline-start: 15px; } @media screen and (max-width: 480px) { .ProseMirror blockquote { margin-inline: 5px; padding-inline-start: 10px; } .ProseMirror a > span.image-view-content-wrap { display: block; margin-inline: 5px; padding-inline-start: 10px; } } /****************************************************************/ /* Styles taken from https://github.com/curvenote/prosemirror-codemark/blob/main/src/codemark.css */ /****************************************************************/ @keyframes blink { 49% { border-color: unset; } 50% { border-color: #fff; } 99% { border-color: #fff; } } .no-cursor { caret-color: transparent; } div:focus .fake-cursor, span:focus .fake-cursor { margin-right: -1px; border-left-width: 1px; border-left-style: solid; animation: blink 1s; animation-iteration-count: infinite; position: relative; z-index: 1; } /*******************************************/ /* MATH STYLES */ /*******************************************/ /*--------------------------------------------------------- * Author: Benjamin R. Bray * License: MIT (see LICENSE in project root for details) *--------------------------------------------------------*/ /* == Math Nodes ======================================== */ .math-node { min-width: 1em; min-height: 1em; font-size: 0.95em; font-family: "Consolas", "Ubuntu Mono", monospace; cursor: auto; } .math-node.empty-math .math-render::before { content: "(empty)"; color: var(--paragraph-error); } .math-node .math-render.parse-error::before { content: "(math error)"; color: var(--paragraph-error); cursor: help; } .math-node.ProseMirror-selectednode { outline: none; } .math-node .math-src { display: none; color: var(--paragraph); tab-size: 4; } .math-node.ProseMirror-selectednode .math-src { display: inline; } .math-node.ProseMirror-selectednode .math-render { display: none; } /* -- Inline Math --------------------------------------- */ .math-inline { display: inline; white-space: nowrap; } .math-inline .math-render { display: inline-block; /* font-size: 0.85em; */ cursor: pointer; } .math-inline .math-src .ProseMirror { display: inline; /* Necessary to fix FireFox bug with contenteditable, https://bugzilla.mozilla.org/show_bug.cgi?id=1252108 */ border-right: 1px solid transparent; border-left: 1px solid transparent; font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace !important; } .math-inline.ProseMirror-selectednode { background-color: var(--background-secondary); padding: 3px; border-radius: 5px; border: 1px solid var(--border); } .math-inline .math-src::after, .math-inline .math-src::before { content: "$$"; color: var(--paragraph-secondary); } /* -- Block Math ---------------------------------------- */ .math-block { display: block; } .math-block .math-render { display: block; } .math-block.ProseMirror-selectednode { background-color: var(--background-secondary); padding: 10px; border-radius: 5px; border: 1px solid var(--border); } .math-block .math-src .ProseMirror { width: 100%; display: block; margin-top: 10px; font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace !important; } /* .math-block .math-src::after, */ .math-block .math-src::before { content: "Math"; text-align: left; color: var(--paragraph-secondary); margin-bottom: 10px; } .math-block .katex-display { margin: 0; } .math-block .katex { max-width: 100%; overflow-x: auto; overflow-y: hidden; } .math-block .katex-html { padding-top: 10px; } /* -- Selection Plugin ---------------------------------- */ /* p::selection, p > *::selection { background-color: #c0c0c0; } .katex-html *::selection { background-color: none !important; } .math-node.math-select .math-render { background-color: #c0c0c0ff; } .math-inline.math-select .math-render { padding-top: 2px; } */ /* Outline lists */ .outline-list { list-style-type: none; position: relative; } .outline-list li ul { padding-left: 25px; } .outline-list li.collapsed .outline-list { display: none; } .outline-list li { position: relative; } .outline-list > li::before { position: absolute; top: 0px; cursor: pointer; content: ""; background-size: 18px; width: 18px; height: 18px; background-color: var(--icon); mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IiM4ODg4ODgiIGQ9Ik03LjQxIDguNThMMTIgMTMuMTdsNC41OS00LjU5TDE4IDEwbC02IDZsLTYtNmwxLjQxLTEuNDJaIi8+PC9zdmc+) no-repeat 50% 50%; mask-size: cover; border: 1px solid var(--background); transform: rotate(0); transition: transform 250ms ease; left: -22px; } .outline-list li:not(.nested)::before { mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IiM4ODg4ODgiIGQ9Ik0xMiAyQTEwIDEwIDAgMCAwIDIgMTJhMTAgMTAgMCAwIDAgMTAgMTBhMTAgMTAgMCAwIDAgMTAtMTBBMTAgMTAgMCAwIDAgMTIgMloiLz48L3N2Zz4=) no-repeat 50% 50%; scale: 0.4; } .outline-list li.collapsed::before { transform: rotate(-90deg); } .outline-list li .outline-list::before { content: " "; position: absolute; height: 100%; transition: border 200ms ease-in-out; left: -14px; border-left: 1px solid var(--border); } .outline-list li .outline-list:hover:before { border-left: 1px solid var(--hover); } /* IMAGE */ .image-view-content-wrap.ProseMirror-selectednode .resizer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background-image: linear-gradient(135deg, #ffffffaa 0%, #ffffff88 5%, transparent 12%, transparent 91%, #ffffff88 97%, #ffffffaa 100%); pointer-events: none; } .ProseMirror > p[data-spacing="double"] .image-container { margin-bottom: 1em; } .ProseMirror > p[data-spacing="single"] .image-container { margin-top: 1em !important; margin-bottom: 1em; } /* RTL */ [dir="rtl"] * { direction: rtl; } [dir="rtl"] ul { margin-left: 0px !important; } .outline-list[dir="rtl"] li > p::before { right: -22px; left: unset; } .outline-list[dir="rtl"] li .outline-list::before { border-left: unset; border-right: 1px solid var(--border); left: unset; right: -14px; } .outline-list[dir="rtl"] li .outline-list:hover:before { border-right: 1px solid var(--hover); border-left: unset; } .outline-list[dir="rtl"] li.collapsed > p::before { transform: rotate(90deg); } .simple-checklist[dir="rtl"] li::after { left: unset; right: -24px; } .simple-checklist[dir="rtl"] li.checked::before { left: unset; right: -22px; } [dir="rtl"] .taskItemTools { right: unset; left: 0 } /* Check list */ .ProseMirror ul.simple-checklist { list-style: none; padding-inline: 0px !important; padding-inline-start: 24px !important; } .ProseMirror li.nested > ul.simple-checklist { padding-inline-start: 15px !important; } .simple-checklist li { position: relative; } .simple-checklist > li::after { position: absolute; top: 0px; cursor: pointer; content: ""; background-size: 18px; width: 14px; height: 14px; border: 2px solid var(--icon); border-radius: 5px; left: -24px; } .simple-checklist > li.checked::after { border: 2px solid var(--accent); } .simple-checklist > li.checked::before { position: absolute; top: 2px; cursor: pointer; content: ""; background-size: 18px; width: 14px; height: 14px; left: -22px; background-color: var(--accent); mask: url(data:image/svg+xml;base64,ICA8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxwYXRoIGQ9Ik0yMSw3TDksMTlMMy41LDEzLjVMNC45MSwxMi4wOUw5LDE2LjE3TDE5LjU5LDUuNTlMMjEsN1oiLz4KICA8L3N2Zz4K) no-repeat 50% 50%; mask-size: cover; } .simple-checklist > li.checked > p { opacity: 0.8; text-decoration-line: line-through; } /* Callout */ .ProseMirror div.callout { padding: 15px; border-radius: 10px; background-color: rgba(var(--callout-color), 0.1); margin-top: 1em; } .ProseMirror div.callout:not(div.callout > p[data-spacing="single"]){ margin-bottom: 1em; } .ProseMirror div.callout > :first-child + * { margin-top: 1em !important; } .ProseMirror div.callout > :first-child { margin: 0px; color: rgb(var(--callout-color)); position: relative; } .ProseMirror div.callout > :first-child::after { position: absolute; top: 0px; right: 0px; cursor: pointer; content: ""; background-size: 18px; width: 18px; height: 18px; background-color: rgb(var(--callout-color)); mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IiM4ODg4ODgiIGQ9Ik03LjQxIDguNThMMTIgMTMuMTdsNC41OS00LjU5TDE4IDEwbC02IDZsLTYtNmwxLjQxLTEuNDJaIi8+PC9zdmc+) no-repeat 50% 50%; mask-size: cover; border: 1px solid var(--background); transform: rotate(0); transition: transform 250ms ease; opacity: 1; } .ProseMirror div.callout > :first-child[dir="rtl"]::after { right: unset; left: 0px; } .ProseMirror div.callout.collapsed > :first-child::after { transform: rotate(-90deg); } .ProseMirror div.callout.collapsed :not(:first-child) { display: none; } .ProseMirror div.callout[data-callout-type="abstract"], .ProseMirror div.callout[data-callout-type="tldr"], .ProseMirror div.callout[data-callout-type="summary"], .ProseMirror div.callout[data-callout-type="tip"], .ProseMirror div.callout[data-callout-type="hint"], .ProseMirror div.callout[data-callout-type="important"] { --callout-color: 0, 191, 188; } .ProseMirror div.callout[data-callout-type="info"], .ProseMirror div.callout[data-callout-type="todo"] { --callout-color: 8, 109, 221; } .ProseMirror div.callout[data-callout-type="success"], .ProseMirror div.callout[data-callout-type="check"], .ProseMirror div.callout[data-callout-type="done"] { --callout-color: 8, 185, 78; } .ProseMirror div.callout[data-callout-type="help"], .ProseMirror div.callout[data-callout-type="faq"], .ProseMirror div.callout[data-callout-type="question"], .ProseMirror div.callout[data-callout-type="warn"], .ProseMirror div.callout[data-callout-type="warning"], .ProseMirror div.callout[data-callout-type="caution"], .ProseMirror div.callout[data-callout-type="attention"] { --callout-color: 236, 117, 0; } .ProseMirror div.callout[data-callout-type="failure"], .ProseMirror div.callout[data-callout-type="fail"], .ProseMirror div.callout[data-callout-type="missing"], .ProseMirror div.callout[data-callout-type="danger"], .ProseMirror div.callout[data-callout-type="error"], .ProseMirror div.callout[data-callout-type="bug"] { --callout-color: 233, 49, 71; } .ProseMirror div.callout[data-callout-type="example"] { --callout-color: 120, 82, 238; } .ProseMirror div.callout[data-callout-type="quote"], .ProseMirror div.callout[data-callout-type="cite"] { --callout-color: 158, 158, 158; } /* Highlight Diff */ ins.diffmod, ins.mod, ins.diffins { background-color: rgba(46, 160, 67, 0.4); text-decoration: none; } del.diffmod, del.diffdel { background-color: rgba(248, 81, 73, 0.4); } del.diffdel { text-decoration: none; } .ProseMirror h1, .ProseMirror h2, .ProseMirror h3, .ProseMirror h4, .ProseMirror h5, .ProseMirror h6 { position: relative; } .ProseMirror h1::before, .ProseMirror h2::before, .ProseMirror h3::before, .ProseMirror h4::before, .ProseMirror h5::before, .ProseMirror h6::before { position: absolute; cursor: pointer; content: ""; background-size: 18px; width: 18px; height: 18px; background-color: var(--icon); mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IiM4ODg4ODgiIGQ9Ik03LjQxIDguNThMMTIgMTMuMTdsNC41OS00LjU5TDE4IDEwbC02IDZsLTYtNmwxLjQxLTEuNDJaIi8+PC9zdmc+) no-repeat 50% 50%; mask-size: cover; border: 1px solid var(--background); transform: rotate(0); transition: transform 250ms ease, opacity 200ms ease; left: -22px; opacity: 0; } .ProseMirror h1[dir="rtl"]::before, .ProseMirror h2[dir="rtl"]::before, .ProseMirror h3[dir="rtl"]::before, .ProseMirror h4[dir="rtl"]::before, .ProseMirror h5[dir="rtl"]::before, .ProseMirror h6[dir="rtl"]::before { display: none; } .ProseMirror h1[dir="rtl"]::after, .ProseMirror h2[dir="rtl"]::after, .ProseMirror h3[dir="rtl"]::after, .ProseMirror h4[dir="rtl"]::after, .ProseMirror h5[dir="rtl"]::after, .ProseMirror h6[dir="rtl"]::after { position: absolute; cursor: pointer; content: ""; background-size: 18px; width: 18px; height: 18px; background-color: var(--icon); mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IiM4ODg4ODgiIGQ9Ik03LjQxIDguNThMMTIgMTMuMTdsNC41OS00LjU5TDE4IDEwbC02IDZsLTYtNmwxLjQxLTEuNDJaIi8+PC9zdmc+) no-repeat 50% 50%; mask-size: cover; border: 1px solid var(--background); transform: rotate(0deg); transition: transform 250ms ease, opacity 200ms ease; right: -22px; opacity: 0; } .ProseMirror h1::before, .ProseMirror h1::after { top: 8px; } .ProseMirror h2::before, .ProseMirror h2::after { top: 3px; } .ProseMirror h3::before, .ProseMirror h3::after { top: 0px; } .ProseMirror h4::before, .ProseMirror h4::after { top: -1px; } .ProseMirror h5::before, .ProseMirror h5::after { top: -2px; } .ProseMirror h6::before, .ProseMirror h6::after { top: -4px; } .ProseMirror h1[data-collapsed="true"]::before, .ProseMirror h2[data-collapsed="true"]::before, .ProseMirror h3[data-collapsed="true"]::before, .ProseMirror h4[data-collapsed="true"]::before, .ProseMirror h5[data-collapsed="true"]::before, .ProseMirror h6[data-collapsed="true"]::before { transform: rotate(-90deg); opacity: 1; } .ProseMirror h1[data-collapsed="true"]::after, .ProseMirror h2[data-collapsed="true"]::after, .ProseMirror h3[data-collapsed="true"]::after, .ProseMirror h4[data-collapsed="true"]::after, .ProseMirror h5[data-collapsed="true"]::after, .ProseMirror h6[data-collapsed="true"]::after { transform: rotate(90deg); opacity: 1; } .ProseMirror h1:hover::before, .ProseMirror h2:hover::before, .ProseMirror h3:hover::before, .ProseMirror h4:hover::before, .ProseMirror h5:hover::before, .ProseMirror h6:hover::before, .ProseMirror h1:hover::after, .ProseMirror h2:hover::after, .ProseMirror h3:hover::after, .ProseMirror h4:hover::after, .ProseMirror h5:hover::after, .ProseMirror h6:hover::after { opacity: 1; } .ProseMirror div.callout h1::before, .ProseMirror div.callout h2::before, .ProseMirror div.callout h3::before, .ProseMirror div.callout h4::before, .ProseMirror div.callout h5::before, .ProseMirror div.callout h6::before { display: none; } [data-hidden-under] { display: none !important; } /* simplebar */ .simplebar-track { height: 9px !important; } .simplebar-content:before { content: "" !important; } .simplebar-content:after { content: "" !important; } pre[class*="language-"] { overflow: initial !important; }