Files
notesnook/packages/editor/styles/styles.css
2025-04-10 10:28:57 +05:00

815 lines
18 KiB
CSS

@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;
line-height: 20px;
}
.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(--border);
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 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;
}
/* Add top & bottom margin for double spaced paragraphs & adjacent nodes
except single spaced paragraphs. */
.ProseMirror > p[data-spacing="double"] + *:not(p[data-spacing="single"]),
.ProseMirror div.callout > p[data-spacing="double"] + *:not(div.callout > p[data-spacing="single"]),
.ProseMirror blockquote > p[data-spacing="double"] + *:not(.ProseMirror blockquote p[data-spacing="single"]) {
margin-top: 1em;
margin-bottom: 1em;
}
/* 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: 3px 5px;
position: relative;
vertical-align: top;
}
.ProseMirror table .selectedCell {
border-color: var(--accent);
}
.ProseMirror table td > *,
.ProseMirror table th > * {
margin-bottom: 0;
}
.ProseMirror table th {
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;
}
.tableWrapper {
/* padding: 1rem 0; */
overflow-x: auto;
}
.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 {
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 > :first-child {
position: relative;
}
.outline-list > li > :first-child::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) > :first-child::before {
mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IiM4ODg4ODgiIGQ9Ik0xMiAyQTEwIDEwIDAgMCAwIDIgMTJhMTAgMTAgMCAwIDAgMTAgMTBhMTAgMTAgMCAwIDAgMTAtMTBBMTAgMTAgMCAwIDAgMTIgMloiLz48L3N2Zz4=)
no-repeat 50% 50%;
scale: 0.4;
}
.outline-list li.collapsed > :first-child::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);
}
[dir="rtl"] .taskItemTools { right: unset; left: 0 }
/* Check list */
.ProseMirror ul.simple-checklist {
list-style: none;
padding: 0;
}
.ProseMirror ul.simple-checklist > li {
display: flex;
}
.ProseMirror ul.simple-checklist > li input {
flex: 0 0 auto;
margin-right: 0.5rem;
user-select: none;
height: 1rem;
width: 1rem;
accent-color: var(--accent);
}
.ProseMirror ul.simple-checklist > li > div {
flex: 1 1 auto;
}
@media screen and (max-width: 480px) {
.ProseMirror ul.simple-checklist > li > input {
height: 21px;
width: 21px;
}
.ProseMirror ul.simple-checklist > li > div {
margin-top: 2px;
}
}
/* 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: 3px;
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;
}
.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;
}