mirror of
https://github.com/streetwriters/notesnook.git
synced 2026-02-24 04:00:59 +01:00
573b24f28f
this reverts all the custom layout based on divs & spans and moves back to using pseudo element for the expand/collapse icon. There were a few problems with the previous logic: 1. We had to write custom logic for text alignment (not a huge deal but it could cause bugs down the line) 2. Aligning the icon properly was hit or miss. We were using flex which meant for multi line headings, the icon appeared way to the left instead of right next to the end of the heading. 3. The styling css for the previous logic was MASSIVE and handled lots of cases which meant more maintenance burden for us. The new logic is simpler: 1. Use `::after` pseudo element for the expand/collapse icon. This works very nicely on Android. 2. Use selection range on the heading to compute bounding rects for each line. It's a bit hacky but works for both LTR & RTL headings. --------- Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com> Co-authored-by: 01zulfi <85733202+01zulfi@users.noreply.github.com> Co-authored-by: Abdullah Atta <abdullahatta@streetwriters.co>
1000 lines
21 KiB
CSS
1000 lines
21 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;
|
|
}
|
|
|
|
.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-y: 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 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 {
|
|
content: "";
|
|
background: var(--shade);
|
|
box-shadow: inset 0px 0px 0px 1px var(--accent);
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
z-index: 2;
|
|
}
|
|
|
|
.ProseMirror table .column-resize-handle {
|
|
background-color: transparent;
|
|
bottom: -2px;
|
|
position: absolute;
|
|
right: -5px;
|
|
top: 0;
|
|
width: 10px;
|
|
|
|
cursor: ew-resize;
|
|
cursor: col-resize;
|
|
z-index: 999;
|
|
}
|
|
|
|
.ProseMirror table .column-resize-handle.active::before {
|
|
position: absolute;
|
|
content: "";
|
|
top: calc(50% - 11px);
|
|
left: -4px;
|
|
|
|
width: 16px;
|
|
height: 18px;
|
|
|
|
background-color: var(--background);
|
|
border: 1px solid var(--border);
|
|
border-radius: 5px;
|
|
|
|
cursor: ew-resize;
|
|
cursor: col-resize;
|
|
}
|
|
|
|
.ProseMirror table .column-resize-handle.active::after {
|
|
position: absolute;
|
|
content: "";
|
|
top: calc(50% - 10px);
|
|
left: -4px;
|
|
|
|
background-size: 16px;
|
|
background-color: var(--icon);
|
|
width: 18px;
|
|
height: 18px;
|
|
mask: url(https://api.iconify.design/ic:round-drag-indicator.svg) no-repeat 50% 50%;
|
|
mask-size: cover;
|
|
|
|
cursor: ew-resize;
|
|
cursor: col-resize;
|
|
}
|
|
|
|
.ProseMirror table p {
|
|
margin: 0;
|
|
}
|
|
|
|
.ProseMirror td > h1:first-child,
|
|
.ProseMirror td > h2:first-child,
|
|
.ProseMirror td > h3:first-child,
|
|
.ProseMirror td > h4:first-child,
|
|
.ProseMirror td > h5:first-child,
|
|
.ProseMirror td > h6:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.ProseMirror td > ol,
|
|
.ProseMirror td > ul {
|
|
padding-left: 20px;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.ProseMirror td > blockquote {
|
|
margin-left: 0;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.ProseMirror td > blockquote > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
/*
|
|
.resize-cursor {
|
|
|
|
} */
|
|
|
|
.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;
|
|
}
|
|
|
|
/* 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::after,
|
|
.ProseMirror h2::after,
|
|
.ProseMirror h3::after,
|
|
.ProseMirror h4::after,
|
|
.ProseMirror h5::after,
|
|
.ProseMirror h6::after {
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
content: "";
|
|
background-size: var(--icon-size, 18px);
|
|
width: var(--icon-size, 18px);
|
|
height: var(--icon-size, 18px);
|
|
|
|
background-color: var(--icon);
|
|
mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IiM4ODg4ODgiIGQ9Ik03LjQxIDguNThMMTIgMTMuMTdsNC41OS00LjU5TDE4IDEwbC02IDZsLTYtNmwxLjQxLTEuNDJaIi8+PC9zdmc+)
|
|
no-repeat 50% 50%;
|
|
mask-size: cover;
|
|
|
|
transform: rotate(0);
|
|
transition: transform 250ms ease, opacity 200ms ease;
|
|
opacity: 0;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.ProseMirror h2::after {
|
|
--icon-size: 16px;
|
|
}
|
|
|
|
.ProseMirror h3::after {
|
|
--icon-size: 14px;
|
|
}
|
|
|
|
.ProseMirror h4::after {
|
|
--icon-size: 14px;
|
|
}
|
|
|
|
.ProseMirror h5::after {
|
|
--icon-size: 14px;
|
|
}
|
|
|
|
.ProseMirror h6::after {
|
|
--icon-size: 11px;
|
|
}
|
|
|
|
.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::after,
|
|
.ProseMirror h2:hover::after,
|
|
.ProseMirror h3:hover::after,
|
|
.ProseMirror h4:hover::after,
|
|
.ProseMirror h5:hover::after,
|
|
.ProseMirror h6:hover::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.ProseMirror h1.is-empty::after,
|
|
.ProseMirror h2.is-empty::after,
|
|
.ProseMirror h3.is-empty::after,
|
|
.ProseMirror h4.is-empty::after,
|
|
.ProseMirror h5.is-empty::after,
|
|
.ProseMirror h6.is-empty::after {
|
|
display: none !important;
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.ProseMirror h1::after,
|
|
.ProseMirror h2::after,
|
|
.ProseMirror h3::after,
|
|
.ProseMirror h4::after,
|
|
.ProseMirror h5::after,
|
|
.ProseMirror h6::after {
|
|
opacity: 1 !important;
|
|
}
|
|
}
|
|
|
|
[data-hidden="true"] {
|
|
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;
|
|
}
|
|
|