evbogue.com
anproto personal data server
1body {
2 background-color: #f2f2f2;
3 color: #444;
4 font-family: "Source Sans 3", sans-serif;
5 max-width: 100%;
6 margin-top: 45px;
7 margin-bottom: 10em;
8}
9
10#scroller {max-width: 680px; margin-left: auto; margin-right: auto;}
11
12blockquote { border-left: 5px solid #f5f5f5; margin-left: none; padding-left: 10px; color: #777; }
13
14p, h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 5px;}
15
16pre {
17 //color: #dd1144;
18 background: #f5f5f5;
19 width: 100%;
20 display: block;
21}
22
23code {
24 background: #f5f5f5;
25 padding: 5px;
26 border-radius: 5px;
27 display: inline-block;
28 vertical-align: bottom;
29}
30
31code, pre {
32 font-family: "Roboto Mono", monospace;
33 font-size: .9em;
34 overflow: auto;
35 word-break: break-all;
36 word-wrap: break-word;
37 white-space: pre;
38 white-space: -moz-pre-wrap;
39 white-space: pre-wrap;
40 white-space: pre\9;
41}
42
43button {
44 margin-left: 5px;
45 font-size: .85em;
46 background: #fff;
47 background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
48 border: 1px solid #e4e4e4;
49 padding: 5px 10px 5px 10px;
50 border-radius: 5px;
51}
52
53hr { border: 1px solid #e4e4e4;}
54
55button:hover {
56 background: #f2f2f2;
57 cursor: pointer;
58}
59
60textarea, input {
61 font-size: 1em;
62 font-family: "Source Sans 3", sans-serif;
63 border: 1px solid #f8f8f8;
64 border-radius: 5px;
65 background: #f8f8f8;
66 color: #555;
67 padding: 5px;
68 //box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
69}
70
71.composer { margin-left: 0; margin-top: 0;}
72
73textarea:hover, textarea:focus, input:hover, input:focus, {
74 background: transparent;
75}
76
77textarea:focus, input:focus {
78 outline: none !important;
79}
80
81textarea {
82 margin-top: 5px;
83 margin-bottom: 5px;
84 width: 99%;
85 height: 150px;
86}
87
88a {
89 color: #045fd0;
90 text-decoration: none;
91}
92
93a:hover {
94 color: #8d82fe;
95}
96
97img {width: 95%;}
98
99img.post-image {
100 width: 150px;
101 height: 150px;
102 object-fit: cover;
103 border-radius: 6px;
104 cursor: zoom-in;
105 display: block;
106}
107
108img.post-image:focus {
109 outline: 2px solid #045fd0;
110 outline-offset: 2px;
111}
112
113.material-symbols-outlined { color: #666; vertical-align: middle; font-size: 18px; cursor: pointer;}
114
115iframe {
116 width: 100%;
117 border: 1px solid #e4e4e4;
118 border-radius: 5px;
119 margin-top: 5px;
120 height: 275px;
121}
122
123#navbar {
124 padding-top: .5em;
125 padding-left: 1em;
126 padding-bottom: .5em;
127 padding-right: 1em;
128 position: fixed;
129 width: 100%;
130 box-sizing: border-box;
131 z-index: 1;
132 top: 0;
133 left: 0;
134 background-color: rgba(248,248,248,0.5);
135 border-bottom: 1px solid #eee;
136 backdrop-filter: blur(10px);
137 display: flex;
138 align-items: center;
139 gap: 6px;
140 flex-wrap: nowrap;
141}
142
143.navbar-left,
144.navbar-right {
145 display: inline-flex;
146 align-items: center;
147 gap: 6px;
148}
149
150.navbar-right {
151 margin-left: auto;
152}
153
154.message {
155 padding: .75em;
156 background: #f8f8f8;
157 border: 1px solid #f5f5f5;
158 margin-top: 5px;
159 min-height: 35px;
160 border-radius: 5px;
161 overflow: hidden;
162 position: relative;
163}
164
165.message.edit-message {
166 padding: .75em .75em 0 .75em;
167}
168
169.message-main {
170 display: flex;
171 align-items: flex-start;
172 gap: 10px;
173}
174
175.message-main > a {
176 display: inline-flex;
177 align-items: center;
178}
179
180.message-main .avatar {
181 float: none;
182}
183
184.message-stack {
185 display: flex;
186 flex-direction: column;
187 gap: 2px;
188 min-width: 0;
189 flex: 1;
190}
191
192.message-stack .avatarlink {
193 line-height: 33px;
194 display: inline-block;
195}
196
197.message-body {
198 flex: 1;
199 min-width: 0;
200}
201
202.message-meta {
203 position: absolute;
204 top: .75em;
205 right: .75em;
206 display: inline-flex;
207 align-items: center;
208 gap: .35em;
209}
210
211.premessage {
212 min-height: 35px;
213}
214
215.message:hover {
216 border: 1px solid #eee;
217}
218
219.new-posts-banner {
220 position: sticky;
221 top: 52px;
222 z-index: 2;
223 display: flex;
224 justify-content: center;
225 padding: 6px 0;
226}
227
228.new-posts-button {
229 background: #fff5cc;
230 border: 1px solid #f2d675;
231 color: #6a4c00;
232}
233
234@media (prefers-color-scheme: dark) {
235 body {
236 background-color: #181818;
237 color: #ccc;
238 }
239 #navbar { background-color: rgba(34,34,34,0.5); border-bottom: 1px solid #333; }
240 .message { background-color: #222; border: 1px solid #1e1e1e;}
241 .message:hover { border: 1px solid #333;}
242 .new-posts-button { background: #3a2f12; border: 1px solid #6b5320; color: #f5d27a; }
243
244 textarea, input, iframe { background: #222; color: #f5f5f5; border: 1px solid #222;}
245
246 button { color: #ccc; background: #333; border: 1px solid #444;}
247 button:hover { background: #222;}
248 hr { border: 1px solid #333;}
249 pre, code { background: #333; color: #f5f5f5;}
250 a {color: #50afe4;}
251}
252
253@media (max-width: 640px) {
254 #navbar {
255 padding-right: 1em;
256 gap: 4px;
257 flex-wrap: wrap;
258 }
259 .navbar-left,
260 .navbar-right {
261 gap: 4px;
262 }
263}
264
265
266.content {margin-top: 5px;}
267
268.message, .message > * {
269 animation: fadein .5s;
270}
271
272@keyframes fadein {
273 from { opacity: 0; }
274 to { opacity: 1; }
275}
276
277.reply { margin-left: 1em; }
278
279.reply-preview {
280 display: inline-flex;
281 align-items: center;
282 gap: 6px;
283 margin-right: 6px;
284}
285
286.reply-preview-icon {
287 font-size: 1em;
288}
289
290.reply-preview-author {
291 font-weight: 600;
292}
293
294.reply-preview-link {
295 font-weight: 500;
296}
297
298.pubkey {
299 color: #9da0a4;
300 font-family: monospace;
301}
302
303.edit-nav {
304 font-family: monospace;
305 font-size: 1em;
306}
307
308.edit-nav-btn {
309 color: #777;
310 margin: 0 2px;
311 cursor: pointer;
312}
313
314.edit-nav-btn.disabled {
315 color: #bbb;
316 cursor: default;
317 pointer-events: none;
318}
319
320.edit-nav-index {
321 color: #888;
322 margin: 0 2px;
323}
324
325.message-actions {
326 margin-top: 6px;
327 display: flex;
328 align-items: center;
329 gap: 6px;
330 width: 100%;
331}
332
333.message-actions-reply {
334}
335
336.message-actions-edit {
337 margin-left: auto;
338 display: inline-flex;
339 align-items: center;
340 gap: 4px;
341 justify-content: flex-end;
342}
343
344.edit-hint {
345 font-family: monospace;
346}
347
348.keypair-notice {
349 position: fixed;
350 top: 64px;
351 left: 50%;
352 transform: translateX(-50%);
353 z-index: 2000;
354 margin: 0;
355 padding: 8px 12px;
356 max-width: min(520px, 90vw);
357 background: #f8f8f8;
358 border: 1px solid #f5f5f5;
359 border-left: 4px solid #ff8c00;
360 border-radius: 6px;
361 color: inherit;
362 font-weight: 600;
363 display: none;
364 box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
365}
366
367.keypair-notice.show {
368 display: block;
369}
370
371.keypair-highlight {
372 box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.6);
373 border-color: #ff8c00;
374}
375
376.disabled {
377 opacity: 0.5;
378 pointer-events: auto;
379}
380
381@media (prefers-color-scheme: dark) {
382 .keypair-notice {
383 background: #222;
384 border: 1px solid #1e1e1e;
385 border-left: 4px solid #ff8c00;
386 color: #ccc;
387 }
388}
389
390.edit-summary {
391 display: inline-flex;
392 align-items: center;
393 line-height: 33px;
394 min-height: 33px;
395 gap: 4px;
396}
397
398.edit-summary-verb {
399 font-weight: 400;
400}
401
402.avatar, .avatar_small {
403 border-radius: 100%;
404 margin: 0px;
405 margin-right: 0px;
406 object-fit: cover;
407 vertical-align: top;
408 display: block;
409}
410
411.avatar {
412 height: 35px;
413 width: 35px;
414}
415
416.avatar_small { height: 25px; width: 25px;}
417
418.breadcrumbs { font-size: 1em; }
419
420.avatarlink { font-weight: 600;}
421.unstyled { color: #ccc;}
422.hljs { padding: 10px; border-radius: 5px; background: #555; color: #f2f2f2;}
423
424.modal-overlay {
425 position: fixed;
426 top: 0;
427 left: 0;
428 width: 100%;
429 height: 100%;
430 background: rgba(0, 0, 0, 0.5);
431 backdrop-filter: blur(5px);
432 z-index: 1000;
433 display: flex;
434 justify-content: center;
435 align-items: center;
436}
437
438.modal-content {
439 width: 90%;
440 max-width: 600px;
441 z-index: 1001;
442}
443
444.image-popover {
445 position: fixed;
446 inset: 0;
447 display: none;
448 align-items: center;
449 justify-content: center;
450 background: rgba(0, 0, 0, 0.6);
451 backdrop-filter: blur(4px);
452 z-index: 1100;
453 padding: 20px;
454 box-sizing: border-box;
455}
456
457.image-popover.open {
458 display: flex;
459}
460
461.image-popover-frame {
462 position: relative;
463 display: inline-flex;
464 align-items: center;
465 justify-content: center;
466 max-width: 90vw;
467 max-height: 90vh;
468}
469
470.image-popover-close {
471 position: absolute;
472 top: 8px;
473 right: 8px;
474 border: 0;
475 background: transparent;
476 border-radius: 999px;
477 width: 36px;
478 height: 36px;
479 display: inline-flex;
480 align-items: center;
481 justify-content: center;
482}
483
484.image-popover-close:hover {
485 background: rgba(255, 255, 255, 0.25);
486}
487
488.image-popover-image {
489 width: auto;
490 height: auto;
491 max-width: 90vw;
492 max-height: 90vh;
493 object-fit: contain;
494 border-radius: 6px;
495 box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
496 background: #fff;
497}
498
499@media (prefers-color-scheme: dark) {
500 .image-popover-close {
501 background: transparent;
502 color: #ddd;
503 }
504
505 .image-popover-close:hover {
506 background: rgba(0, 0, 0, 0.35);
507 }
508
509 .image-popover-image {
510 background: #222;
511 }
512}
513
514/* Share page layout tweaks */
515body {
516 margin-top: 0;
517}
518main {
519 max-width: 720px;
520 margin: 0 auto;
521 padding: 56px 16px 96px;
522}
523.panel {
524 margin-top: 24px;
525 padding: 16px;
526 border-radius: 5px;
527 background: #f8f8f8;
528 border: 1px solid #e4e4e4;
529 display: inline-flex;
530 flex-direction: column;
531 gap: 16px;
532}
533.examples {
534 display: grid;
535 gap: 16px;
536 width: 100%;
537}
538.examples h2 {
539 font-size: 1rem;
540 margin: 0;
541}
542.examples pre {
543 margin: 0;
544 padding: 16px;
545 border-radius: 5px;
546 background: #f5f5f5;
547 border: 1px solid #e4e4e4;
548 overflow: auto;
549 font-family: "Roboto Mono", monospace;
550 font-size: 0.85rem;
551}
552button.demo {
553 margin-left: 0;
554}