apunkt/rowboat
1
0
Fork 0
mirror of https://github.com/rowboatlabs/rowboat.git synced 2026-06-21 20:18:11 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

css changes to tiptap

Browse source
This commit is contained in:
Arjun 2026-02-18 16:36:13 +05:30
parent f22087cbc3
commit d23f2167ee
1 changed files with 90 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

151
apps/x/apps/renderer/src/styles/editor.css
View file

@ -16,8 +16,17 @@
position: relative; position: relative;
} }
/* Notion-like base typography */
.tiptap-editor .ProseMirror { .tiptap-editor .ProseMirror {
padding: 1rem; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif,
"Segoe UI Emoji", "Segoe UI Symbol";
font-size: 16px;
line-height: 1.5;
color: rgb(55, 53, 47);
max-width: 720px;
margin: 0 auto;
padding: 2rem 4rem;
outline: none; outline: none;
} }
@ -27,47 +36,45 @@
/* Placeholder */ /* Placeholder */
.tiptap-editor .ProseMirror p.is-editor-empty:first-child::before { .tiptap-editor .ProseMirror p.is-editor-empty:first-child::before {
color: var(--muted-foreground); color: rgba(55, 53, 47, 0.4);
content: attr(data-placeholder); content: attr(data-placeholder);
float: left; float: left;
height: 0; height: 0;
pointer-events: none; pointer-events: none;
} }
/* Typography */ /* Paragraphs */
.tiptap-editor .ProseMirror { .tiptap-editor .ProseMirror p {
font-size: 1rem; margin: 1px 0;
line-height: 1.75; padding: 3px 2px;
color: var(--foreground);
}
.tiptap-editor .ProseMirror > * + * {
margin-top: 0.75em;
} }
/* Headings */ /* Headings */
.tiptap-editor .ProseMirror h1 { .tiptap-editor .ProseMirror h1 {
font-size: 2em; font-size: 1.875em;
font-weight: 700; font-weight: 600;
line-height: 1.2; line-height: 1.3;
margin-top: 1.5em; margin-top: 2em;
margin-bottom: 0.5em; margin-bottom: 4px;
padding: 3px 2px;
} }
.tiptap-editor .ProseMirror h2 { .tiptap-editor .ProseMirror h2 {
font-size: 1.5em; font-size: 1.5em;
font-weight: 600; font-weight: 600;
line-height: 1.3; line-height: 1.3;
margin-top: 1.25em; margin-top: 1.1em;
margin-bottom: 0.5em; margin-bottom: 1px;
padding: 3px 2px;
} }
.tiptap-editor .ProseMirror h3 { .tiptap-editor .ProseMirror h3 {
font-size: 1.25em; font-size: 1.25em;
font-weight: 600; font-weight: 600;
line-height: 1.4; line-height: 1.3;
margin-top: 1em; margin-top: 1em;
margin-bottom: 0.5em; margin-bottom: 1px;
padding: 3px 2px;
} }
.tiptap-editor .ProseMirror h1:first-child, .tiptap-editor .ProseMirror h1:first-child,
@ -76,16 +83,11 @@
margin-top: 0; margin-top: 0;
} }
/* Paragraphs */
.tiptap-editor .ProseMirror p {
margin: 0;
}
/* Lists */ /* Lists */
.tiptap-editor .ProseMirror ul, .tiptap-editor .ProseMirror ul,
.tiptap-editor .ProseMirror ol { .tiptap-editor .ProseMirror ol {
padding-left: 1.5em; padding-left: 1.625em;
margin: 0.5em 0; margin: 1px 0;
} }
.tiptap-editor .ProseMirror ul { .tiptap-editor .ProseMirror ul {
@ -97,7 +99,7 @@
} }
.tiptap-editor .ProseMirror li { .tiptap-editor .ProseMirror li {
margin: 0.25em 0; padding: 3px 0;
} }
.tiptap-editor .ProseMirror li p { .tiptap-editor .ProseMirror li p {
@ -106,50 +108,56 @@
/* Blockquote */ /* Blockquote */
.tiptap-editor .ProseMirror blockquote { .tiptap-editor .ProseMirror blockquote {
border-left: 3px solid var(--border); border-left: 3px solid rgb(55, 53, 47);
padding-left: 1em; padding-left: 14px;
margin: 4px 0;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
color: var(--muted-foreground);
font-style: italic;
} }
/* Code */ /* Code blocks */
.tiptap-editor .ProseMirror code {
background-color: var(--muted);
border-radius: 0.25em;
padding: 0.15em 0.3em;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 0.9em;
}
/* Code Block */
.tiptap-editor .ProseMirror pre { .tiptap-editor .ProseMirror pre {
background-color: var(--muted); background: rgb(247, 246, 243);
border-radius: 0.5em; border-radius: 4px;
padding: 1em; padding: 2rem;
font-family: "SFMono-Regular", Menlo, Consolas, "PT Mono",
"Liberation Mono", Courier, monospace;
font-size: 0.85em;
line-height: 1.5;
margin: 8px 0;
overflow-x: auto; overflow-x: auto;
margin: 0.75em 0;
} }
.tiptap-editor .ProseMirror pre code { .tiptap-editor .ProseMirror pre code {
background: none; background: none;
padding: 0; padding: 0;
font-size: 0.875em; font-size: inherit;
color: inherit; color: inherit;
border-radius: 0;
} }
/* Horizontal Rule */ /* Inline code */
.tiptap-editor .ProseMirror code {
background: rgba(135, 131, 120, 0.15);
border-radius: 3px;
padding: 0.2em 0.4em;
font-family: "SFMono-Regular", Menlo, Consolas, monospace;
font-size: 0.85em;
color: #eb5757;
}
/* Divider */
.tiptap-editor .ProseMirror hr { .tiptap-editor .ProseMirror hr {
border: none; border: none;
border-top: 1px solid var(--border); border-top: 1px solid rgba(55, 53, 47, 0.16);
margin: 1.5em 0; margin: 8px 0;
} }
/* Links */ /* Links */
.tiptap-editor .ProseMirror a { .tiptap-editor .ProseMirror a {
color: var(--primary); color: inherit;
text-decoration: underline; text-decoration: underline;
text-decoration-color: rgba(55, 53, 47, 0.4);
text-underline-offset: 2px; text-underline-offset: 2px;
cursor: pointer; cursor: pointer;
} }
@ -175,14 +183,13 @@
.tiptap-editor .ProseMirror ul[data-type="taskList"] { .tiptap-editor .ProseMirror ul[data-type="taskList"] {
list-style: none; list-style: none;
padding-left: 0; padding-left: 0;
margin: 0.5em 0; margin: 1px 0;
} }
.tiptap-editor .ProseMirror ul[data-type="taskList"] li { .tiptap-editor .ProseMirror ul[data-type="taskList"] li {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 0.5em; gap: 0.5em;
margin: 0.25em 0;
} }
.tiptap-editor .ProseMirror ul[data-type="taskList"] li > label { .tiptap-editor .ProseMirror ul[data-type="taskList"] li > label {
@ -238,14 +245,6 @@
align-self: center; align-self: center;
} }
/* Content area centering */
.tiptap-editor .ProseMirror {
margin-left: 20%;
margin-right: 20%;
padding-left: 1rem;
padding-right: 1rem;
}
.wiki-link-anchor { .wiki-link-anchor {
position: absolute; position: absolute;
height: 0; height: 0;
@ -327,3 +326,33 @@
background-color: var(--primary); background-color: var(--primary);
transition: width 0.3s ease; transition: width 0.3s ease;
} }
/* Dark mode overrides */
.dark .tiptap-editor .ProseMirror {
color: rgba(255, 255, 255, 0.9);
}
.dark .tiptap-editor .ProseMirror a {
text-decoration-color: rgba(255, 255, 255, 0.4);
}
.dark .tiptap-editor .ProseMirror blockquote {
border-left-color: rgba(255, 255, 255, 0.4);
}
.dark .tiptap-editor .ProseMirror hr {
border-top-color: rgba(255, 255, 255, 0.16);
}
.dark .tiptap-editor .ProseMirror pre {
background: rgba(255, 255, 255, 0.05);
}
.dark .tiptap-editor .ProseMirror code {
background: rgba(255, 255, 255, 0.1);
color: #ff7b72;
}
.dark .tiptap-editor .ProseMirror p.is-editor-empty:first-child::before {
color: rgba(255, 255, 255, 0.3);
}