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}
221
222.presence-avatar:hover {
223 transform: scale(1.15);
224}
225
226/* ── Collaboration: Comment sidebar ──────────────────────────────────────── */
227
228.comment-sidebar {
229 position: fixed;
230 right: 0;
231 top: 49px; /* below navbar */
232 bottom: 0;
233 width: 260px;
234 background: var(--bg-card);
235 border-left: 1px solid var(--border);
236 display: flex;
237 flex-direction: column;
238 z-index: 50;
239 overflow: hidden;
240}
241
242.comment-sidebar-header {
243 padding: 0.75rem 1rem;
244 font-size: 0.85rem;
245 font-weight: 600;
246 border-bottom: 1px solid var(--border);
247 flex-shrink: 0;
248 color: var(--text-muted);
249 text-transform: uppercase;
250 letter-spacing: 0.05em;
251}
252
253.comment-threads {
254 flex: 1;
255 overflow-y: auto;
256 padding: 0.75rem;
257 display: flex;
258 flex-direction: column;
259 gap: 0.75rem;
260}
261
262.comment-empty {
263 color: var(--text-muted);
264 font-size: 0.85rem;
265 text-align: center;
266 margin-top: 2rem;
267}
268
269.comment-thread {
270 background: var(--bg);
271 border: 1px solid var(--border);
272 border-radius: var(--radius);
273 overflow: hidden;
274}
275
276.comment-thread-label {
277 font-size: 0.75rem;
278 color: var(--text-muted);
279 padding: 0.3rem 0.6rem;
280 background: var(--border);
281 border-bottom: 1px solid var(--border);
282}
283
284.comment-item {
285 padding: 0.5rem 0.6rem;
286 border-top: 1px solid var(--border);
287}
288
289.comment-item:first-of-type {
290 border-top: none;
291}
292
293.comment-author {
294 font-size: 0.75rem;
295 font-weight: 600;
296 color: var(--primary);
297 margin-bottom: 0.2rem;
298}
299
300.comment-text {
301 font-size: 0.85rem;
302 line-height: 1.45;
303 word-break: break-word;
304}
305
306.comment-time {
307 font-size: 0.7rem;
308 color: var(--text-muted);
309 margin-top: 0.25rem;
310}
311
312/* ── Collaboration: Comment button & form ────────────────────────────────── */
313
314.comment-btn {
315 position: fixed;
316 z-index: 100;
317 padding: 0.25rem 0.6rem;
318 font-size: 0.78rem;
319 background: var(--primary);
320 color: #fff;
321 border: none;
322 border-radius: var(--radius);
323 cursor: pointer;
324 box-shadow: 0 2px 8px rgba(0,0,0,0.15);
325}
326
327.comment-btn:hover {
328 opacity: 0.88;
329}
330
331.comment-form {
332 position: fixed;
333 z-index: 110;
334 background: var(--bg-card);
335 border: 1px solid var(--border);
336 border-radius: var(--radius);
337 box-shadow: 0 4px 20px rgba(0,0,0,0.15);
338 padding: 0.75rem;
339 width: 280px;
340}
341
342.comment-form textarea {
343 width: 100%;
344 box-sizing: border-box;
345 background: var(--bg);
346 border: 1px solid var(--border);
347 border-radius: var(--radius);
348 color: var(--text);
349 padding: 0.4rem 0.5rem;
350 font-size: 0.85rem;
351 resize: vertical;
352 outline: none;
353 font-family: inherit;
354}
355
356.comment-form textarea:focus {
357 border-color: var(--primary);
358}
359
360.comment-form-actions {
361 display: flex;
362 gap: 0.5rem;
363 margin-top: 0.5rem;
364 justify-content: flex-end;
365}
366
367/* When comment sidebar is visible, shrink editor to avoid overlap */
368.editor-page:has(~ .comment-sidebar) {
369 right: 260px;
370}
371
372/* ── Collaboration: Invite modal ─────────────────────────────────────────── */
373
374.invite-modal {
375 position: fixed;
376 inset: 0;
377 background: rgba(0,0,0,0.4);
378 display: flex;
379 align-items: center;
380 justify-content: center;
381 z-index: 200;
382}
383
384.invite-modal-box {
385 background: var(--bg-card);
386 border: 1px solid var(--border);
387 border-radius: var(--radius);
388 box-shadow: 0 8px 32px rgba(0,0,0,0.2);
389 width: 440px;
390 max-width: calc(100vw - 2rem);
391}
392
393.invite-modal-header {
394 display: flex;
395 align-items: center;
396 justify-content: space-between;
397 padding: 0.75rem 1rem;
398 border-bottom: 1px solid var(--border);
399 font-weight: 600;
400 font-size: 0.9rem;
401}
402
403.invite-modal-close {
404 background: none;
405 border: none;
406 color: var(--text-muted);
407 cursor: pointer;
408 font-size: 1rem;
409 padding: 0.1rem 0.3rem;
410 line-height: 1;
411}
412
413.invite-modal-close:hover {
414 color: var(--text);
415}
416
417.invite-modal-body {
418 padding: 1rem;
419}