diffdown.com
Diffdown is a real-time collaborative Markdown editor/previewer built on the AT Protocol
diffdown.com
1.editor-page {
2 position: fixed;
3 top: 49px; /* navbar height */
4 left: 0;
5 right: 0;
6 bottom: 0;
7 display: flex;
8 flex-direction: column;
9}
10
11.editor-toolbar {
12 display: flex;
13 justify-content: space-between;
14 align-items: center;
15 padding: 0.5rem 1rem;
16 border-bottom: 1px solid var(--border);
17 background: var(--bg-card);
18 flex-shrink: 0;
19}
20
21.toolbar-actions {
22 display: flex;
23 align-items: center;
24 gap: 0.75rem;
25 flex-shrink: 0;
26}
27
28@media (max-width: 600px) {
29 .editor-toolbar {
30 flex-wrap: wrap;
31 gap: 0.4rem;
32 padding: 0.4rem 0.75rem;
33 }
34
35 .breadcrumb {
36 flex: 1 1 100%;
37 min-width: 0;
38 }
39
40 .toolbar-actions {
41 flex: 1 1 100%;
42 gap: 0.4rem;
43 overflow-x: auto;
44 padding-bottom: 0.1rem;
45 }
46}
47
48.btn-outline.active {
49 background: var(--primary);
50 color: #fff;
51}
52
53.title-input {
54 background: transparent;
55 border: none;
56 border-bottom: 1px solid transparent;
57 color: var(--text);
58 font-size: 0.9rem;
59 padding: 0.1rem 0.25rem;
60 min-width: 12rem;
61 max-width: 30rem;
62 outline: none;
63}
64
65.title-input:hover,
66.title-input:focus {
67 border-bottom-color: var(--border);
68}
69
70.editor-split {
71 display: flex;
72 flex: 1;
73 overflow: hidden;
74 min-height: 0;
75}
76
77.editor-pane {
78 flex: 1;
79 overflow: hidden;
80 min-height: 0;
81 border-right: 1px solid var(--border);
82}
83
84#editor {
85 height: 100%;
86}
87
88.editor-pane .cm-editor {
89 height: 100%;
90}
91
92.preview-pane {
93 flex: 1;
94 overflow: auto;
95 padding: 1.5rem;
96 background: var(--bg-card);
97}
98
99/* Rich text (WYSIWYG) editor container */
100.editor-rich {
101 flex: 1;
102 overflow: auto;
103 padding: 2rem 1.5rem;
104 display: flex;
105 flex-direction: column;
106 align-items: center;
107 background: var(--bg);
108}
109
110.editor-rich .milkdown {
111 width: 100%;
112 max-width: 720px;
113 outline: none;
114 cursor: text;
115 background: var(--bg-card);
116 border: 1px solid var(--border);
117 border-radius: var(--radius);
118 box-shadow: 0 2px 12px rgba(0,0,0,0.08);
119 padding: 3rem 3.5rem;
120}
121
122/* Milkdown prose styles — match markdown.css */
123.editor-rich .milkdown .ProseMirror {
124 outline: none;
125 min-height: 60vh;
126}
127
128.editor-rich .milkdown .ProseMirror p {
129 margin-bottom: 1.25em;
130}
131
132.editor-rich .milkdown .ProseMirror ul,
133.editor-rich .milkdown .ProseMirror ol {
134 padding-left: 1.5rem;
135}
136
137.editor-rich .milkdown .ProseMirror li {
138 margin-bottom: 0.25em;
139}
140
141.editor-rich .milkdown .ProseMirror li > p {
142 margin-bottom: 0;
143}
144
145/* Source/Wrap/Preview buttons hidden in rich text mode */
146.source-only {
147 display: none;
148}
149
150/* Link editing tooltip */
151.link-tooltip {
152 position: fixed;
153 z-index: 200;
154 display: none;
155 align-items: center;
156 gap: 0.4rem;
157 background: var(--bg-card);
158 border: 1px solid var(--border);
159 border-radius: var(--radius);
160 padding: 0.35rem 0.5rem;
161 box-shadow: 0 4px 16px rgba(0,0,0,0.15);
162}
163
164.link-tooltip.visible {
165 display: flex;
166}
167
168.link-tooltip input {
169 width: 260px;
170 border: 1px solid var(--border);
171 border-radius: var(--radius);
172 background: var(--bg);
173 color: var(--text);
174 padding: 0.2rem 0.5rem;
175 font-size: 0.83rem;
176 outline: none;
177}
178
179.link-tooltip input:focus {
180 border-color: var(--primary);
181}
182
183.link-tooltip button {
184 background: none;
185 border: 1px solid var(--border);
186 border-radius: var(--radius);
187 color: var(--text-muted);
188 cursor: pointer;
189 font-size: 0.8rem;
190 padding: 0.2rem 0.45rem;
191 white-space: nowrap;
192 line-height: 1.4;
193}
194
195.link-tooltip button:first-of-type {
196 background: var(--primary);
197 border-color: var(--primary);
198 color: #fff;
199}
200
201.link-tooltip button:hover { opacity: 0.8; }
202
203/* ── Collaboration: Presence ─────────────────────────────────────────────── */
204
205.presence-list {
206 display: flex;
207 align-items: center;
208 gap: 4px;
209}
210
211.presence-avatar {
212 display: inline-block;
213 width: 22px;
214 height: 22px;
215 border-radius: 50%;
216 border: 2px solid var(--bg-card);
217 box-shadow: 0 0 0 1px var(--border);
218 flex-shrink: 0;
219 transition: transform 0.15s;
220 object-fit: cover;
221}
222
223.presence-avatar:hover {
224 transform: scale(1.15);
225}
226
227/* ── Collaboration: Comment sidebar ──────────────────────────────────────── */
228
229.comment-sidebar {
230 position: fixed;
231 right: 0;
232 top: 49px; /* below navbar */
233 bottom: 0;
234 width: 260px;
235 background: var(--bg-card);
236 border-left: 1px solid var(--border);
237 display: flex;
238 flex-direction: column;
239 z-index: 50;
240 overflow: hidden;
241}
242
243.comment-sidebar-header {
244 padding: 0.75rem 1rem;
245 font-size: 0.85rem;
246 font-weight: 600;
247 border-bottom: 1px solid var(--border);
248 flex-shrink: 0;
249 color: var(--text-muted);
250 text-transform: uppercase;
251 letter-spacing: 0.05em;
252}
253
254.comment-threads {
255 flex: 1;
256 overflow-y: auto;
257 padding: 0.75rem;
258 display: flex;
259 flex-direction: column;
260 gap: 0.75rem;
261}
262
263.comment-empty {
264 color: var(--text-muted);
265 font-size: 0.85rem;
266 text-align: center;
267 margin-top: 2rem;
268}
269
270.comment-thread {
271 background: var(--bg);
272 border: 1px solid var(--border);
273 border-radius: var(--radius);
274 overflow: hidden;
275}
276
277.comment-thread-label {
278 font-size: 0.75rem;
279 color: var(--text-muted);
280 padding: 0.3rem 0.6rem;
281 background: var(--border);
282 border-bottom: 1px solid var(--border);
283}
284
285.comment-item {
286 padding: 0.5rem 0.6rem;
287 border-top: 1px solid var(--border);
288}
289
290.comment-item:first-of-type {
291 border-top: none;
292}
293
294.comment-author {
295 font-size: 0.75rem;
296 font-weight: 600;
297 color: var(--primary);
298 margin-bottom: 0.2rem;
299}
300
301.comment-text {
302 font-size: 0.85rem;
303 line-height: 1.45;
304 word-break: break-word;
305}
306
307.comment-time {
308 font-size: 0.7rem;
309 color: var(--text-muted);
310 margin-top: 0.25rem;
311}
312
313/* ── Collaboration: Comment button & form ────────────────────────────────── */
314
315.comment-btn {
316 position: fixed;
317 z-index: 100;
318 padding: 0.25rem 0.6rem;
319 font-size: 0.78rem;
320 background: var(--primary);
321 color: #fff;
322 border: none;
323 border-radius: var(--radius);
324 cursor: pointer;
325 box-shadow: 0 2px 8px rgba(0,0,0,0.15);
326}
327
328.comment-btn:hover {
329 opacity: 0.88;
330}
331
332.comment-form {
333 position: fixed;
334 z-index: 110;
335 background: var(--bg-card);
336 border: 1px solid var(--border);
337 border-radius: var(--radius);
338 box-shadow: 0 4px 20px rgba(0,0,0,0.15);
339 padding: 0.75rem;
340 width: 280px;
341}
342
343.comment-form textarea {
344 width: 100%;
345 box-sizing: border-box;
346 background: var(--bg);
347 border: 1px solid var(--border);
348 border-radius: var(--radius);
349 color: var(--text);
350 padding: 0.4rem 0.5rem;
351 font-size: 0.85rem;
352 resize: vertical;
353 outline: none;
354 font-family: inherit;
355}
356
357.comment-form textarea:focus {
358 border-color: var(--primary);
359}
360
361.comment-form-actions {
362 display: flex;
363 gap: 0.5rem;
364 margin-top: 0.5rem;
365 justify-content: flex-end;
366}
367
368/* When comment sidebar is visible, shrink editor to avoid overlap */
369.editor-page:has(~ .comment-sidebar) {
370 right: 260px;
371}
372
373/* ── Collaboration: Invite modal ─────────────────────────────────────────── */
374
375.invite-modal {
376 position: fixed;
377 inset: 0;
378 background: rgba(0,0,0,0.4);
379 display: flex;
380 align-items: center;
381 justify-content: center;
382 z-index: 200;
383}
384
385.invite-modal-box {
386 background: var(--bg-card);
387 border: 1px solid var(--border);
388 border-radius: var(--radius);
389 box-shadow: 0 8px 32px rgba(0,0,0,0.2);
390 width: 440px;
391 max-width: calc(100vw - 2rem);
392}
393
394.invite-modal-header {
395 display: flex;
396 align-items: center;
397 justify-content: space-between;
398 padding: 0.75rem 1rem;
399 border-bottom: 1px solid var(--border);
400 font-weight: 600;
401 font-size: 0.9rem;
402}
403
404.invite-modal-close {
405 background: none;
406 border: none;
407 color: var(--text-muted);
408 cursor: pointer;
409 font-size: 1rem;
410 padding: 0.1rem 0.3rem;
411 line-height: 1;
412}
413
414.invite-modal-close:hover {
415 color: var(--text);
416}
417
418.invite-modal-body {
419 padding: 1rem;
420}