mirror of
https://github.com/streetwriters/notesnook.git
synced 2026-02-25 04:32:31 +01:00
7bca693c44
1. get rid of ThemeVariant. All variants can now be accessed anywhere. 2. remove unnecessary button variants 3. make buttons more responsive 4. implement themes server
601 lines
12 KiB
CSS
601 lines
12 KiB
CSS
|
|
|
|
.ProseMirror span * {
|
|
font-family: inherit;
|
|
}
|
|
|
|
.ProseMirror {
|
|
font-family: inherit;
|
|
}
|
|
|
|
.ProseMirror p.is-editor-empty:first-child::before {
|
|
color: var(--placeholder);
|
|
content: attr(data-placeholder);
|
|
float: left;
|
|
height: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ProseMirror code:not(pre code) {
|
|
background-color: var(--bgSecondary);
|
|
}
|
|
|
|
.ProseMirror:first-child {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.ProseMirror hr {
|
|
box-sizing: border-box;
|
|
background-color: transparent;
|
|
border-width: 0px;
|
|
margin-block: 0px;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
margin-top: 4px;
|
|
margin-bottom: -10px;
|
|
}
|
|
|
|
.ProseMirror hr::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 99%;
|
|
height: 5px;
|
|
background-color: var(--border);
|
|
}
|
|
|
|
.ProseMirror hr.ProseMirror-selectednode::after {
|
|
border: 2px solid var(--accent);
|
|
}
|
|
|
|
.ProseMirror code:not(pre 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:hover {
|
|
filter: brightness(70%);
|
|
}
|
|
|
|
.ProseMirror p {
|
|
margin-bottom: 0px;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.ProseMirror > p[data-spacing="double"] {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.ProseMirror > p[data-spacing="single"] {
|
|
margin-top: 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(--text);
|
|
animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
|
|
}
|
|
@keyframes ProseMirror-cursor-blink {
|
|
to {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.ProseMirror-hideselection *::selection {
|
|
background: transparent;
|
|
color: var(--text);
|
|
}
|
|
.ProseMirror-hideselection *::-moz-selection {
|
|
background: transparent;
|
|
color: var(--text);
|
|
}
|
|
.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(--text) !important;
|
|
}
|
|
|
|
.search-result.selected {
|
|
background-color: var(--dimPrimary) !important;
|
|
}
|
|
|
|
.search-result {
|
|
background-color: var(--disabled);
|
|
}
|
|
|
|
.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-left: 5px solid var(--border);
|
|
padding-left: 15px;
|
|
}
|
|
|
|
/****************************************************************/
|
|
/* 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: red;
|
|
}
|
|
|
|
.math-node .math-render.parse-error::before {
|
|
content: "(math error)";
|
|
color: red;
|
|
cursor: help;
|
|
}
|
|
|
|
.math-node.ProseMirror-selectednode {
|
|
outline: none;
|
|
}
|
|
|
|
.math-node .math-src {
|
|
display: none;
|
|
color: var(--text);
|
|
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(--bgSecondary);
|
|
padding: 3px;
|
|
border-radius: 5px;
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.math-inline .math-src::after,
|
|
.math-inline .math-src::before {
|
|
content: "$$";
|
|
color: var(--disabled);
|
|
}
|
|
|
|
/* -- Block Math ---------------------------------------- */
|
|
|
|
.math-block {
|
|
display: block;
|
|
}
|
|
|
|
.math-block .math-render {
|
|
display: block;
|
|
}
|
|
|
|
.math-block.ProseMirror-selectednode {
|
|
background-color: var(--bgSecondary);
|
|
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(--disabled);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.math-block .katex-display {
|
|
margin: 0;
|
|
}
|
|
|
|
.math-block .katex {
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
/* -- 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 > p {
|
|
position: relative;
|
|
}
|
|
|
|
.outline-list li > p::before {
|
|
position: absolute;
|
|
top: 4px;
|
|
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) > p::before {
|
|
mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IiM4ODg4ODgiIGQ9Ik0xMiAyQTEwIDEwIDAgMCAwIDIgMTJhMTAgMTAgMCAwIDAgMTAgMTBhMTAgMTAgMCAwIDAgMTAtMTBBMTAgMTAgMCAwIDAgMTIgMloiLz48L3N2Zz4=)
|
|
no-repeat 50% 50%;
|
|
scale: 0.4;
|
|
}
|
|
|
|
.outline-list li.collapsed > p::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;
|
|
}
|
|
|
|
/* RTL */
|
|
|
|
[dir="rtl"] * {
|
|
direction: rtl;
|
|
}
|
|
|
|
[dir="rtl"] ul {
|
|
margin-left: 0px !important;
|
|
}
|
|
|
|
blockquote[dir="rtl"] {
|
|
border-left: none;
|
|
padding-left: 0px;
|
|
border-right: 5px solid var(--border);
|
|
padding-right: 15px;
|
|
}
|
|
|
|
|
|
.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(--bgSecondaryHover);
|
|
border-left: unset;
|
|
}
|
|
|
|
.outline-list[dir="rtl"] li.collapsed > p::before {
|
|
transform: rotate(90deg);
|
|
}
|