diffdown.com
Diffdown is a real-time collaborative Markdown editor/previewer built on the AT Protocol
diffdown.com
1*, *::before, *::after {
2 box-sizing: border-box;
3 margin: 0;
4 padding: 0;
5}
6
7:root {
8 --bg: #fafafa;
9 --bg-card: #fff;
10 --text: #1a1a2e;
11 --text-muted: #6b7280;
12 --border: #e5e7eb;
13 --primary: #2563eb;
14 --primary-hover: #1d4ed8;
15 --danger: #dc2626;
16 --success: #16a34a;
17 --radius: 6px;
18 --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
19 --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
20}
21
22body {
23 font-family: var(--font);
24 background: var(--bg);
25 color: var(--text);
26 line-height: 1.6;
27}
28
29a { color: var(--primary); text-decoration: none; }
30a:hover { text-decoration: underline; }
31
32/* Navbar */
33.navbar {
34 display: flex;
35 align-items: center;
36 justify-content: space-between;
37 padding: 0.75rem 1.5rem;
38 border-bottom: 1px solid var(--border);
39 background: var(--bg-card);
40}
41
42.logo {
43 font-weight: 700;
44 font-size: 1.1rem;
45 color: var(--text);
46}
47
48.nav-right {
49 display: flex;
50 align-items: center;
51 gap: 1rem;
52}
53
54.nav-user { color: var(--text-muted); }
55
56/* Buttons */
57.btn {
58 display: inline-block;
59 padding: 0.5rem 1rem;
60 background: var(--primary);
61 color: #fff;
62 border: 1px solid var(--primary);
63 border-radius: var(--radius);
64 cursor: pointer;
65 font-size: 0.875rem;
66 font-family: inherit;
67 text-decoration: none;
68}
69
70.btn:hover { background: var(--primary-hover); text-decoration: none; }
71.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.8rem; }
72.btn-lg { padding: 0.7rem 1.5rem; font-size: 1rem; }
73.btn-outline {
74 background: transparent;
75 color: var(--primary);
76}
77.btn-outline:hover { background: var(--primary); color: #fff; }
78.btn-link {
79 background: none;
80 border: none;
81 color: var(--text-muted);
82 cursor: pointer;
83 font-size: inherit;
84 font-family: inherit;
85}
86.btn-link:hover { color: var(--text); }
87.btn-oauth {
88 background: var(--bg);
89 color: var(--text);
90 border: 1px solid var(--border);
91 display: block;
92 text-align: center;
93 margin-bottom: 0.5rem;
94}
95.btn-oauth:hover { background: var(--border); }
96
97/* Main */
98main {
99 max-width: 1200px;
100 margin: 0 auto;
101 padding: 2rem 1.5rem;
102}
103
104/* Alerts */
105.alert {
106 padding: 0.75rem 1rem;
107 border-radius: var(--radius);
108 margin-bottom: 1rem;
109}
110
111.alert-error {
112 background: #fef2f2;
113 color: var(--danger);
114 border: 1px solid #fecaca;
115}
116
117/* Auth pages */
118.auth-page {
119 max-width: 400px;
120 margin: 2rem auto;
121}
122
123.auth-form label {
124 display: block;
125 margin-bottom: 1rem;
126 font-size: 0.875rem;
127 font-weight: 500;
128}
129
130.auth-form input, .auth-form select, .auth-form textarea {
131 display: block;
132 width: 100%;
133 margin-top: 0.25rem;
134 padding: 0.5rem 0.75rem;
135 border: 1px solid var(--border);
136 border-radius: var(--radius);
137 font-size: 0.9rem;
138 font-family: inherit;
139}
140
141.auth-form textarea { resize: vertical; }
142.auth-form .btn { width: 100%; margin-top: 0.5rem; }
143
144.auth-divider {
145 text-align: center;
146 margin: 1.5rem 0;
147 color: var(--text-muted);
148 font-size: 0.8rem;
149}
150
151.auth-divider span {
152 background: var(--bg);
153 padding: 0 1rem;
154}
155
156.auth-switch {
157 text-align: center;
158 margin-top: 1rem;
159 font-size: 0.875rem;
160 color: var(--text-muted);
161}
162
163/* Landing */
164.landing {
165 text-align: center;
166 padding: 4rem 0;
167}
168
169.landing h1 { font-size: 2.5rem; margin-bottom: 1rem; }
170.landing p { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 2rem; }
171.landing-actions { display: flex; gap: 1rem; justify-content: center; }
172
173/* Dashboard */
174.dashboard-header {
175 display: flex;
176 justify-content: space-between;
177 align-items: center;
178 margin-bottom: 1.5rem;
179}
180
181.repo-list {
182 display: grid;
183 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
184 gap: 1rem;
185}
186
187.repo-card {
188 display: block;
189 padding: 1.25rem;
190 background: var(--bg-card);
191 border: 1px solid var(--border);
192 border-radius: var(--radius);
193 color: var(--text);
194 transition: border-color 0.15s;
195}
196
197.repo-card:hover { border-color: var(--primary); text-decoration: none; }
198.repo-card h3 { margin-bottom: 0.5rem; }
199.repo-card p { color: var(--text-muted); font-size: 0.875rem; margin-bottom: 0.5rem; }
200.repo-vis { font-size: 0.75rem; background: var(--bg); padding: 0.15rem 0.5rem; border-radius: 999px; }
201.repo-card time { display: block; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.5rem; }
202
203/* File browser */
204.repo-page { }
205.repo-header { margin-bottom: 1.5rem; }
206.repo-header h2 { margin-bottom: 0.25rem; }
207.repo-header p { color: var(--text-muted); }
208
209.file-browser {
210 background: var(--bg-card);
211 border: 1px solid var(--border);
212 border-radius: var(--radius);
213}
214
215.file-browser-header {
216 display: flex;
217 justify-content: space-between;
218 align-items: center;
219 padding: 0.75rem 1rem;
220 border-bottom: 1px solid var(--border);
221 font-weight: 600;
222}
223
224.file-list { list-style: none; }
225
226.file-list li {
227 display: flex;
228 justify-content: space-between;
229 align-items: center;
230 padding: 0.6rem 1rem;
231 border-bottom: 1px solid var(--border);
232}
233
234.file-list li:last-child { border-bottom: none; }
235.file-actions { display: flex; gap: 0.5rem; }
236
237/* File page */
238.file-page, .history-page, .diff-page { }
239
240.file-header {
241 display: flex;
242 justify-content: space-between;
243 align-items: center;
244 margin-bottom: 1.5rem;
245}
246
247.breadcrumb {
248 display: flex;
249 align-items: center;
250 gap: 0.5rem;
251 font-size: 0.9rem;
252}
253
254.breadcrumb span { color: var(--text-muted); }
255
256/* Version table */
257.version-table {
258 width: 100%;
259 border-collapse: collapse;
260 background: var(--bg-card);
261 border: 1px solid var(--border);
262 border-radius: var(--radius);
263 font-size: 0.875rem;
264}
265
266.version-table th, .version-table td {
267 padding: 0.6rem 0.75rem;
268 text-align: left;
269 border-bottom: 1px solid var(--border);
270}
271
272.version-table th { background: var(--bg); font-weight: 600; }
273
274.diff-controls { margin-bottom: 1rem; }
275
276/* Dialog */
277dialog {
278 border: 1px solid var(--border);
279 border-radius: var(--radius);
280 padding: 1.5rem;
281 max-width: 400px;
282}
283
284dialog::backdrop { background: rgba(0,0,0,0.3); }
285.dialog-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
286
287/* Empty state */
288.empty-state {
289 text-align: center;
290 padding: 2rem;
291 color: var(--text-muted);
292}
293
294/* Status indicators */
295.status-unsaved { color: #d97706; font-size: 0.8rem; }
296.status-saved { color: var(--success); font-size: 0.8rem; }
297.status-error { color: var(--danger); font-size: 0.8rem; }