1
/* Content: shared editor surface */
2
.tiptap {
3
  position: relative;
4
  color: var(--color-zinc-300);
5
  font-family: var(--font-sans);
6
  line-height: 1.7;
7
  outline: none;
8
}
9
 
10
.tiptap-document-lead {
11
  padding-top: 1rem;
12
}
13
 
14
.tiptap-editor-surface {
15
  padding-inline-start: 16px;
16
  padding-inline-end: 0;
17
}
18
 
19
.tiptap-page-body {
20
  padding-bottom: clamp(5rem, 10vh, 8rem);
21
}
22
 
23
.tiptap:focus-visible,
24
.tiptap [contenteditable]:focus-visible {
25
  outline: none;
26
  box-shadow: none;
27
}
28
 
29
@media (min-width: 640px) {
30
  .tiptap-editor-surface {
31
    padding-inline-start: 28px;
32
  }
33
}
34
 
35
.tiptap :where(p) {
36
  margin: 0;
37
}
38
 
39
.tiptap > * + * {
40
  margin-top: 0.75em;
41
}
42
 
43
.tiptap h1,
44
.tiptap h2,
45
.tiptap h3 {
46
  font-weight: 600;
47
  color: var(--color-zinc-100);
48
}
49
 
50
.tiptap h1 {
51
  font-size: 1.875rem;
52
  font-weight: 700;
53
  letter-spacing: -0.025em;
54
  line-height: 1.15;
55
  margin-top: 2rem;
56
  margin-bottom: 0.5rem;
57
}
58
 
59
.tiptap h2 {
60
  font-size: 1.5rem;
61
  letter-spacing: -0.015em;
62
  line-height: 1.2;
63
  margin-top: 1.5rem;
64
  margin-bottom: 0.375rem;
65
}
66
 
67
.tiptap h3 {
68
  font-size: 1.25rem;
69
  line-height: 1.3;
70
  margin-top: 1.25rem;
71
  margin-bottom: 0.25rem;
72
}
73
 
74
.tiptap ul,
75
.tiptap ol {
76
  padding-left: 1.5rem;
77
}
78
 
79
.tiptap ul {
80
  list-style-type: disc;
81
}
82
 
83
.tiptap ol {
84
  list-style-type: decimal;
85
}
86
 
87
.tiptap li {
88
  margin-top: 0.25em;
89
}
90
 
91
.tiptap li p {
92
  margin: 0;
93
}
94
 
95
.tiptap blockquote {
96
  border-left: 3px solid var(--color-zinc-700);
97
  padding-left: 1rem;
98
  color: var(--color-zinc-400);
99
}
100
 
101
.tiptap hr {
102
  border: none;
103
  border-top: 1px solid var(--color-zinc-700);
104
  margin: 1.5rem 0;
105
}
106
 
107
.tiptap a {
108
  color: var(--color-accent-400);
109
  text-decoration: underline;
110
  text-underline-offset: 2px;
111
}
112
 
113
.tiptap a:hover {
114
  color: var(--color-accent-300);
115
}
116
 
117
/* Content: fallback inline code outside the managed code-block node view. */
118
.tiptap code:not(.tiptap-code-block-content) {
119
  font-family: var(--font-mono);
120
  font-size: 0.875em;
121
  background-color: var(--color-zinc-800);
122
  border-radius: 0.25rem;
123
  padding: 0.15em 0.35em;
124
  color: var(--color-zinc-200);
125
}
126
 
127
/* Content: fallback preformatted blocks outside the managed code-block node view. */
128
.tiptap pre:not(.tiptap-code-block-pre) {
129
  font-family: var(--font-mono);
130
  font-size: 0.875rem;
131
  background-color: var(--color-zinc-900);
132
  border: 1px solid var(--color-zinc-800);
133
  border-radius: 0.5rem;
134
  padding: 0.75rem 1rem;
135
  overflow-x: auto;
136
}
137
 
138
.tiptap pre:not(.tiptap-code-block-pre) code:not(.tiptap-code-block-content) {
139
  background: none;
140
  border-radius: 0;
141
  padding: 0;
142
  font-size: inherit;
143
  color: inherit;
144
}
145
 
146
/* Content: fallback images outside the managed image node view. */
147
.tiptap img:not(.tiptap-image) {
148
  max-width: 100%;
149
  height: auto;
150
  border-radius: 0.5rem;
151
}
152
 
153
.tiptap s {
154
  text-decoration: line-through;
155
}
156
 
157
.tiptap u {
158
  text-underline-offset: 3px;
159
}
160
 
161
/* Content: placeholder */
162
.tiptap > p.is-empty::before {
163
  content: attr(data-placeholder);
164
  float: left;
165
  height: 0;
166
  pointer-events: none;
167
  color: var(--color-zinc-500);
168
}
169
 
170
/* Content: collaboration carets */
171
.collaboration-carets__caret {
172
  position: relative;
173
  margin-left: -1px;
174
  margin-right: -1px;
175
  border-left: 2px solid;
176
  word-break: normal;
177
  pointer-events: none;
178
}
179
 
180
.collaboration-carets__label {
181
  position: absolute;
182
  top: -1.4em;
183
  left: -1px;
184
  font-size: 0.65rem;
185
  font-weight: 600;
186
  line-height: 1;
187
  padding: 0.1rem 0.3rem;
188
  border-radius: 3px 3px 3px 0;
189
  white-space: nowrap;
190
  color: #fff;
191
  user-select: none;
192
  pointer-events: none;
193
}
194
 
195
/* When a collaboration cursor widget sits between top-level block nodes
196
   (e.g. remote user has a NodeSelection on an image), the inline <span>
197
   creates an anonymous line box that displaces content. Taking it out of
198
   flow removes the visible gap while keeping the cursor at its natural
199
   static position. Does not affect inline cursors inside paragraphs. */
200
.tiptap > .collaboration-carets__caret {
201
  position: absolute;
202
}
203
 
204
/* Content: task lists */
205
.tiptap ul[data-type="taskList"] {
206
  list-style: none;
207
  padding-left: 0;
208
}
209
 
210
.tiptap ul[data-type="taskList"] > li {
211
  display: flex;
212
  align-items: flex-start;
213
  gap: 0.5rem;
214
}
215
 
216
.tiptap ul[data-type="taskList"] > li > label {
217
  display: flex;
218
  align-items: center;
219
  flex-shrink: 0;
220
  margin-top: 0.35em;
221
  user-select: none;
222
}
223
 
224
.tiptap ul[data-type="taskList"] > li > div {
225
  flex: 1;
226
  min-width: 0;
227
}
228
 
229
.tiptap ul[data-type="taskList"] > li > label input[type="checkbox"] {
230
  appearance: none;
231
  width: 16px;
232
  height: 16px;
233
  border: 2px solid var(--color-zinc-500);
234
  border-radius: 3px;
235
  background: transparent;
236
  cursor: pointer;
237
  flex-shrink: 0;
238
  transition:
239
    background-color 0.15s,
240
    border-color 0.15s;
241
}
242
 
243
.tiptap ul[data-type="taskList"] > li > label input[type="checkbox"]:checked {
244
  background-color: var(--color-accent-500);
245
  border-color: var(--color-accent-500);
246
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
247
  background-size: 12px;
248
  background-position: center;
249
  background-repeat: no-repeat;
250
}
251
 
252
.tiptap ul[data-type="taskList"] > li[data-checked="true"] > div > p {
253
  text-decoration: line-through;
254
  color: var(--color-zinc-500);
255
}