diffdown.com
Diffdown is a real-time collaborative Markdown editor/previewer built on the AT Protocol
diffdown.com
1@import url(https://fonts.bunny.net/css?family=barlow:100,200,300,400,500,600|lexend:100,200,300,400,500,600,700,800,900);
2
3*, *::before, *::after {
4 box-sizing: border-box;
5 margin: 0;
6 padding: 0;
7}
8
9:root {
10 --bg: #fafafa;
11 --bg-card: #fff;
12 --text: #1a1a2e;
13 --text-muted: #6b7280;
14 --border: #e5e7eb;
15 --primary: #2563eb;
16 --primary-hover: #1549d6;
17 --danger: #dc2626;
18 --success: #16a34a;
19 --code-bg: #f3f4f6;
20 --alert-error-bg: #fef2f2;
21 --alert-error-border: #fecaca;
22 --heading-font: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
23 --radius: 6px;
24 --font: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
25 --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
26}
27
28[data-theme="dark"] {
29 --bg: #0d1117;
30 --bg-card: #161b22;
31 --text: #e6edf3;
32 --text-muted: #ededed;
33 --text-secondary: #d4d4d4;
34 --border: #30363d;
35 --code-bg: #1f2428;
36 --primary: #388bfd;
37 --primary-hover: #62a3ee;
38 --danger: #f85149;
39 --success: #3fb950;
40 --alert-error-bg: #1c0608;
41 --alert-error-border: #6e1c20;
42}
43
44@media (prefers-color-scheme: dark) {
45 :root:not([data-theme="light"]) {
46 --bg: #0d1117;
47 --bg-card: #161b22;
48 --text: #e6edf3;
49 --text-muted: #ededed;
50 --text-secondary: #d4d4d4;
51 --border: #30363d;
52 --code-bg: #1f2428;
53 --primary: #388bfd;
54 --primary-hover: #62a3ee;
55 --danger: #f85149;
56 --success: #3fb950;
57 --alert-error-bg: #1c0608;
58 --alert-error-border: #6e1c20;
59 }
60}
61
62body {
63 font-family: var(--font);
64 background: var(--bg);
65 color: var(--text);
66 line-height: 1.5;
67}
68
69a { color: var(--primary); text-decoration: none; }
70a:hover { text-decoration: underline; }
71
72h1, h2, h3, h4, h5 {
73 font-family: var(--heading-font);
74 font-weight: 500;
75 margin-top: 1.5rem;
76 margin-bottom: 0.5rem;
77}
78
79ul {
80 list-style: disc;
81 margin-left: 1.5rem;
82}
83
84li {
85 margin-bottom: 0.25rem;
86 margin-left: 1rem;
87}
88
89p {
90 margin-bottom: 1rem;
91 line-height: 1.4;
92}
93
94/* Navbar */
95.navbar {
96 display: flex;
97 align-items: center;
98 justify-content: space-between;
99 padding: 0.75rem 1.5rem;
100 border-bottom: 1px solid var(--border);
101 background: var(--bg-card);
102}
103
104.logo {
105 font-weight: 500;
106 font-size: 1.1rem;
107 color: var(--text);
108}
109
110.nav-right {
111 display: flex;
112 align-items: center;
113 gap: 1rem;
114}
115
116.nav-user { color: var(--text-muted); }
117
118/* Buttons */
119.btn {
120 display: inline-block;
121 padding: 0.5rem 1rem;
122 background: var(--primary);
123 color: #fff;
124 border: 1px solid var(--primary);
125 border-radius: var(--radius);
126 cursor: pointer;
127 font-size: 0.875rem;
128 font-family: inherit;
129 text-decoration: none;
130}
131
132.btn:hover { background: var(--primary-hover); text-decoration: none;}
133.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.8rem; }
134.btn-lg { padding: 0.7rem 1.5rem; font-size: 1rem; }
135.btn-outline {
136 background: transparent;
137 color: var(--primary);
138}
139.btn-outline:hover { background: var(--primary); color: #fff; }
140.btn-danger.btn-outline:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
141.btn-link {
142 background: none;
143 border: none;
144 color: var(--text-muted);
145 cursor: pointer;
146 font-size: inherit;
147 font-family: inherit;
148}
149.btn-link:hover { color: var(--text); }
150.btn-oauth {
151 background: var(--bg);
152 color: var(--text);
153 border: 1px solid var(--border);
154 display: block;
155 text-align: center;
156 margin-bottom: 0.5rem;
157}
158.btn-oauth:hover { background: var(--border); }
159
160/* Main */
161main {
162 max-width: 1200px;
163 margin: 0 auto;
164 padding: 2rem 1.5rem;
165}
166
167/* Alerts */
168.alert {
169 padding: 0.75rem 1rem;
170 border-radius: var(--radius);
171 margin-bottom: 1rem;
172}
173
174.alert-error {
175 background: var(--alert-error-bg);
176 color: var(--danger);
177 border: 1px solid var(--alert-error-border);
178}
179
180.warning {
181 color: var(--danger);
182}
183
184/* Auth pages */
185.auth-page {
186 max-width: 400px;
187 margin: 2rem auto;
188}
189
190.auth-form label {
191 display: block;
192 margin-bottom: 1rem;
193 font-size: 0.875rem;
194 font-weight: 500;
195}
196
197.auth-form input, .auth-form select, .auth-form textarea {
198 display: block;
199 width: 100%;
200 margin-top: 0.25rem;
201 padding: 0.5rem 0.75rem;
202 border: 1px solid var(--border);
203 border-radius: var(--radius);
204 font-size: 0.9rem;
205 font-family: inherit;
206}
207
208.auth-form textarea { resize: vertical; }
209.auth-form .btn { width: 100%; margin-top: 0.5rem; }
210
211.auth-divider {
212 text-align: center;
213 margin: 1.5rem 0;
214 color: var(--text-muted);
215 font-size: 0.8rem;
216}
217
218.auth-divider span {
219 background: var(--bg);
220 padding: 0 1rem;
221}
222
223.auth-switch {
224 text-align: center;
225 margin-top: 1rem;
226 font-size: 0.875rem;
227 color: var(--text-muted);
228}
229
230/* Landing */
231.landing {
232 text-align: center;
233 padding: 4rem 0;
234}
235
236.landing h1, .about-page h1 { font-size: 2.5rem; margin-bottom: 1.25rem; }
237.landing p, .about-page p { font-weight: 400; margin-bottom: 1.25rem; }
238.landing-actions { display: flex; gap: 1rem; justify-content: center; }
239
240.landing-header, .about-header {
241 text-align: center;
242}
243
244.landing-header p {
245 text-align: center;
246 font-size: 1.1rem;
247 font-weight: 400;
248 margin-bottom: 1.25rem;
249}
250
251.about-header {
252 text-align: left;
253}
254
255.about-header p {
256 text-align: left;
257 font-size: 1.1rem;
258 font-weight: 400;
259 margin-bottom: 1.25rem;
260}
261
262.about-content {
263 color: var(--text-secondary);
264 display: grid;
265 grid-template-columns: 1fr 1fr;
266 gap: 4rem;
267 text-align: left;
268 margin-bottom: 2rem;
269}
270
271.landing-hr, .about-hr {
272 margin: 2rem 0;
273}
274
275@media (max-width: 640px) {
276 .landing-content, .about-content {
277 grid-template-columns: 1fr;
278 }
279}
280
281/* Dashboard */
282.dashboard-header {
283 display: flex;
284 justify-content: space-between;
285 align-items: center;
286 margin-bottom: 1.5rem;
287}
288
289.view-toggle {
290 display: flex;
291 gap: 0.25rem;
292}
293
294.view-toggle button {
295 background: none;
296 border: 1px solid var(--border);
297 border-radius: var(--radius);
298 padding: 0.25rem 0.5rem;
299 cursor: pointer;
300 color: var(--text-muted);
301 font-size: 1rem;
302 line-height: 1;
303}
304
305.view-toggle button.active {
306 background: var(--bg-card);
307 border-color: var(--primary);
308 color: var(--primary);
309}
310
311.repo-list {
312 display: grid;
313 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
314 gap: 1rem;
315}
316
317.repo-list.list-view {
318 grid-template-columns: 1fr;
319 gap: 0;
320}
321
322.repo-list.list-view .repo-card {
323 border-radius: 0;
324 border-bottom: none;
325 display: flex;
326 align-items: baseline;
327 gap: 1rem;
328 padding: 0.75rem 1rem;
329}
330
331.repo-list.list-view .repo-card:first-child { border-radius: var(--radius) var(--radius) 0 0; }
332.repo-list.list-view .repo-card:last-child { border-radius: 0 0 var(--radius) var(--radius); border-bottom: 1px solid var(--border); }
333.repo-list.list-view .repo-card:only-child { border-radius: var(--radius); border-bottom: 1px solid var(--border); }
334
335.repo-list.list-view .repo-card h3 { margin-bottom: 0; font-size: 1rem; font-weight: 500; }
336.repo-list.list-view .repo-card time { margin-top: 0; margin-left: auto; }
337.repo-list.list-view .repo-card:hover { border-color: var(--border); background: color-mix(in srgb, var(--primary) 5%, var(--bg-card)); }
338
339.repo-card {
340 display: block;
341 padding: 1.25rem;
342 background: var(--bg-card);
343 border: 1px solid var(--border);
344 border-radius: var(--radius);
345 color: var(--text);
346 transition: border-color 0.15s;
347}
348
349.repo-card:hover { border-color: var(--primary); text-decoration: none; }
350.repo-card h3 { margin-bottom: 0.5rem; }
351.repo-card p { color: var(--text-muted); font-size: 0.875rem; margin-bottom: 0.5rem; }
352.repo-vis { font-size: 0.75rem; background: var(--bg); padding: 0.15rem 0.5rem; border-radius: 999px; }
353.repo-card time { display: block; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.5rem; }
354
355/* File browser */
356.repo-header { margin-bottom: 1.5rem; }
357.repo-header h2 { margin-bottom: 0.25rem; }
358.repo-header p { color: var(--text-muted); }
359
360.file-browser {
361 background: var(--bg-card);
362 border: 1px solid var(--border);
363 border-radius: var(--radius);
364}
365
366.file-browser-header {
367 display: flex;
368 justify-content: space-between;
369 align-items: center;
370 padding: 0.75rem 1rem;
371 border-bottom: 1px solid var(--border);
372 font-weight: 600;
373}
374
375.file-list { list-style: none; }
376
377.file-list li {
378 display: flex;
379 justify-content: space-between;
380 align-items: center;
381 padding: 0.6rem 1rem;
382 border-bottom: 1px solid var(--border);
383}
384
385.file-list li:last-child { border-bottom: none; }
386.file-actions { display: flex; gap: 0.5rem; }
387
388/* File page */
389.file-header {
390 display: flex;
391 justify-content: space-between;
392 align-items: center;
393 margin-bottom: 1.5rem;
394}
395
396.breadcrumb {
397 display: flex;
398 align-items: center;
399 gap: 0.5rem;
400 font-size: 0.9rem;
401}
402
403.breadcrumb span { color: var(--text-muted); }
404
405/* Version table */
406.version-table {
407 width: 100%;
408 border-collapse: collapse;
409 background: var(--bg-card);
410 border: 1px solid var(--border);
411 border-radius: var(--radius);
412 font-size: 0.875rem;
413}
414
415.version-table th, .version-table td {
416 padding: 0.6rem 0.75rem;
417 text-align: left;
418 border-bottom: 1px solid var(--border);
419}
420
421.version-table th { background: var(--bg); font-weight: 600; }
422
423.diff-controls { margin-bottom: 1rem; }
424
425/* Dialog */
426dialog {
427 border: 1px solid var(--border);
428 border-radius: var(--radius);
429 padding: 1.5rem;
430 max-width: 400px;
431}
432
433dialog::backdrop { background: rgba(0,0,0,0.3); }
434.dialog-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
435
436/* Empty state */
437.empty-state {
438 text-align: center;
439 padding: 2rem;
440 color: var(--text-muted);
441}
442
443/* Status indicators */
444.status-unsaved { color: #d97706; font-size: 0.8rem; }
445.status-saved { color: var(--success); font-size: 0.8rem; }
446.status-error { color: var(--danger); font-size: 0.8rem; }