fork of https://forged.synth.download/sd/pds-dash but with my cool and awesome customization!
synth.download basic customizations
+487
-2
+1
-1
index.html
+1
-1
index.html
+1
-1
src/App.svelte
+1
-1
src/App.svelte
···
59
59
<p>Loading...</p>
60
60
{:then accountsData}
61
61
<div id="Account">
62
-
<h1 onclick={carameldansenfusion} id="Header">ATProto PDS</h1>
62
+
<h1 onclick={carameldansenfusion} id="Header">Synth.Download PDS</h1>
63
63
<p>Home to {accountsData.length} accounts</p>
64
64
<div id="accountsList">
65
65
{#each accountsData as accountObject}
+485
themes/synthdownload/theme.css
+485
themes/synthdownload/theme.css
···
1
+
/* Synth.Download-alike for pds-dash */
2
+
3
+
/* Ayu Light */
4
+
@media (prefers-color-scheme: light) {
5
+
:root {
6
+
--background: #fafafa;
7
+
--foreground: #575f66;
8
+
--accent: #f2ae49;
9
+
--link: hsl(from var(--accent) h s calc(l - 30)); /* darken for light */
10
+
11
+
--black: #8A9199;
12
+
--red: #F51818;
13
+
--green: #86B300;
14
+
--yellow: #F2AE49;
15
+
--blue: #399EE6;
16
+
--purple: #A37ACC;
17
+
--cyan: #4CBF99;
18
+
--white: #FAFAFA;
19
+
20
+
--dark-black: #575F66;
21
+
--dark-red: #F51818;
22
+
--dark-green: #86B300;
23
+
--dark-yellow: #F2AE49;
24
+
--dark-blue: #399EE6;
25
+
--dark-purple: #A37ACC;
26
+
--dark-cyan: #4CBF99;
27
+
--dark-white: #FAFAFA;
28
+
29
+
--border: hsl(from var(--foreground) h s calc(l + 10));
30
+
--hover: hsl(from var(--background) h s calc(l - 20));;
31
+
--shadow: rgba(from var(--foreground) r g b / .8);
32
+
--focused: var(--dark-purple)
33
+
}
34
+
}
35
+
36
+
/* Astrodark */
37
+
@media (prefers-color-scheme: dark) {
38
+
:root {
39
+
--background: #1a1d23;
40
+
--foreground: #caccd3;
41
+
--accent: #efbd58;
42
+
--link: var(--accent);
43
+
44
+
--black: #576176;
45
+
--red: #FAA5AB;
46
+
--green: #A5CD84;
47
+
--yellow: #EFBD58;
48
+
--blue: #8DC3F1;
49
+
--purple: #DEAEED;
50
+
--cyan: #27FFDF;
51
+
--white: #CACCD3;
52
+
53
+
--dark-black: #111317;
54
+
--dark-red: #F8747E;
55
+
--dark-green: #75AD47;
56
+
--dark-yellow: #D09214;
57
+
--dark-blue: #50A4E9;
58
+
--dark-purple: #CC83E3;
59
+
--dark-cyan: #00B298;
60
+
--dark-white: #ADB0BB;
61
+
62
+
--border: hsl(from var(--background) h s calc(l + 40));
63
+
--hover: hsl(from var(--background) h s calc(l + 20));
64
+
;
65
+
--shadow: rgba(from var(--background) r g b / .8);
66
+
--focused: var(--dark-purple)
67
+
}
68
+
}
69
+
70
+
:root {
71
+
color-scheme: light dark;
72
+
}
73
+
74
+
/* hide accounts that we wouldn't think is a good idea to publicly show */
75
+
#Account *[href*="did:plc:34hq2fkdnl33le2lsefwom2s"] {
76
+
display: none;
77
+
}
78
+
79
+
body {
80
+
margin: 0;
81
+
display: flex;
82
+
place-items: center;
83
+
background-color: var(--background);
84
+
font-family: monospace, -apple-system, system-ui, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
85
+
font-size: 1.05rem;
86
+
line-height: 1.5;
87
+
color: var(--foreground);
88
+
border-color: var(--border);
89
+
overflow-wrap: break-word;
90
+
word-break: break-word;
91
+
hyphens: none;
92
+
}
93
+
94
+
a {
95
+
color: var(--foreground);
96
+
text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent);
97
+
text-decoration-thickness: 0.1em;
98
+
transition: 0.2s;
99
+
100
+
&:hover {
101
+
color: var(--link);
102
+
text-decoration-color: var(--accent);
103
+
text-decoration-skip-ink: none;
104
+
text-decoration-thickness: .3em;
105
+
transition: 0.2s;
106
+
}
107
+
}
108
+
109
+
h1 {
110
+
font-size: 2.5em;
111
+
line-height: 1.2;
112
+
font-weight: 700;
113
+
}
114
+
115
+
#app {
116
+
max-width: 1400px;
117
+
width: 100%;
118
+
margin: 0 auto;
119
+
padding: 0;
120
+
text-align: center;
121
+
}
122
+
123
+
/* Post Component */
124
+
#postContainer {
125
+
display: flex;
126
+
flex-direction: column;
127
+
border-radius: 12px;
128
+
border: 1px solid var(--border-color);
129
+
background-color: var(--content-background-color);
130
+
margin-bottom: 20px;
131
+
overflow-wrap: break-word;
132
+
overflow: hidden;
133
+
box-shadow: var(--card-shadow);
134
+
transition: transform 0.2s ease, box-shadow 0.2s ease;
135
+
}
136
+
137
+
#postContainer:hover {
138
+
transform: translateY(-2px);
139
+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
140
+
}
141
+
142
+
#postHeader {
143
+
display: flex;
144
+
flex-direction: row;
145
+
align-items: center;
146
+
justify-content: start;
147
+
background-color: var(--header-background-color);
148
+
padding: 12px 16px;
149
+
height: 60px;
150
+
border-bottom: 1px solid var(--border-color);
151
+
font-weight: 600;
152
+
overflow-wrap: break-word;
153
+
}
154
+
155
+
#displayName {
156
+
display: block;
157
+
color: var(--text-color);
158
+
font-size: 1.1em;
159
+
padding: 0;
160
+
margin: 0 0 2px 0;
161
+
text-overflow: ellipsis;
162
+
overflow: hidden;
163
+
white-space: nowrap;
164
+
width: 100%;
165
+
letter-spacing: -0.01em;
166
+
}
167
+
168
+
#handle {
169
+
display: flex;
170
+
align-items: center;
171
+
color: #6b7280;
172
+
font-size: 0.85em;
173
+
font-weight: 400;
174
+
padding: 0;
175
+
margin: 0;
176
+
gap: 8px;
177
+
}
178
+
179
+
#postLink {
180
+
color: var(--time-color);
181
+
font-size: 0.85em;
182
+
padding: 0;
183
+
margin: 0;
184
+
opacity: 0.9;
185
+
}
186
+
187
+
#postContent {
188
+
display: flex;
189
+
text-align: start;
190
+
flex-direction: column;
191
+
padding: 16px;
192
+
background-color: var(--content-background-color);
193
+
color: var(--text-color);
194
+
overflow-wrap: break-word;
195
+
white-space: pre-line;
196
+
line-height: 1.6;
197
+
}
198
+
199
+
#replyingText,
200
+
#quotingText {
201
+
font-size: 0.8em;
202
+
margin: 0;
203
+
padding: 0 0 10px 0;
204
+
color: #6b7280;
205
+
}
206
+
207
+
#postText {
208
+
margin: 0 0 8px 0;
209
+
padding: 0;
210
+
overflow-wrap: break-word;
211
+
word-break: break-word;
212
+
hyphens: none;
213
+
font-size: 1.05em;
214
+
}
215
+
216
+
#headerText {
217
+
margin-left: 12px;
218
+
font-size: 0.9em;
219
+
text-align: start;
220
+
word-break: break-word;
221
+
max-width: 80%;
222
+
max-height: 95%;
223
+
overflow: hidden;
224
+
align-self: flex-start;
225
+
margin-top: auto;
226
+
margin-bottom: auto;
227
+
}
228
+
229
+
#carouselContainer {
230
+
position: relative;
231
+
width: 100%;
232
+
margin-top: 12px;
233
+
display: flex;
234
+
flex-direction: column;
235
+
align-items: center;
236
+
border-radius: 8px;
237
+
overflow: hidden;
238
+
}
239
+
240
+
#carouselControls {
241
+
display: flex;
242
+
justify-content: space-between;
243
+
align-items: center;
244
+
width: 100%;
245
+
max-width: 500px;
246
+
margin-top: 10px;
247
+
}
248
+
249
+
#carouselIndicators {
250
+
display: flex;
251
+
gap: 6px;
252
+
}
253
+
254
+
.indicator {
255
+
width: 6px;
256
+
height: 6px;
257
+
background-color: var(--indicator-inactive-color);
258
+
border-radius: 50%;
259
+
transition: background-color 0.2s ease, transform 0.2s ease;
260
+
}
261
+
262
+
.indicator.active {
263
+
background-color: var(--indicator-active-color);
264
+
transform: scale(1.3);
265
+
}
266
+
267
+
#prevBtn,
268
+
#nextBtn {
269
+
background-color: var(--button-bg);
270
+
color: var(--text-color);
271
+
border: 1px solid var(--border-color);
272
+
width: 32px;
273
+
height: 32px;
274
+
cursor: pointer;
275
+
display: flex;
276
+
align-items: center;
277
+
justify-content: center;
278
+
border-radius: 50%;
279
+
transition: background-color 0.15s ease, transform 0.15s ease;
280
+
font-size: 16px;
281
+
}
282
+
283
+
#prevBtn:hover:not(:disabled),
284
+
#nextBtn:hover:not(:disabled) {
285
+
background-color: var(--button-hover);
286
+
transform: scale(1.05);
287
+
}
288
+
289
+
#prevBtn:disabled,
290
+
#nextBtn:disabled {
291
+
opacity: 0.4;
292
+
cursor: not-allowed;
293
+
}
294
+
295
+
#embedVideo {
296
+
width: 100%;
297
+
max-width: 500px;
298
+
margin-top: 12px;
299
+
align-self: center;
300
+
border-radius: 8px;
301
+
overflow: hidden;
302
+
}
303
+
304
+
#embedImages {
305
+
min-width: min(100%, 500px);
306
+
max-width: min(100%, 500px);
307
+
max-height: 500px;
308
+
object-fit: contain;
309
+
margin: 0;
310
+
border-radius: 8px;
311
+
}
312
+
313
+
/* Account Component */
314
+
#accountContainer {
315
+
display: flex;
316
+
text-align: start;
317
+
align-items: center;
318
+
background-color: var(--content-background-color);
319
+
padding: 12px;
320
+
margin-bottom: 15px;
321
+
border: 1px solid var(--border-color);
322
+
border-radius: 12px;
323
+
transition: background-color 0.15s ease;
324
+
}
325
+
326
+
#accountContainer:hover {
327
+
background-color: var(--hover-bg);
328
+
}
329
+
330
+
#accountName {
331
+
margin-left: 12px;
332
+
font-size: 0.95em;
333
+
max-width: 80%;
334
+
overflow: hidden;
335
+
text-overflow: ellipsis;
336
+
white-space: nowrap;
337
+
font-weight: 500;
338
+
}
339
+
340
+
#avatar {
341
+
width: 48px;
342
+
height: 48px;
343
+
margin: 0;
344
+
object-fit: cover;
345
+
border-radius: 50%;
346
+
border: 2px solid white;
347
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
348
+
}
349
+
350
+
/* App.Svelte Layout */
351
+
#Content {
352
+
display: flex;
353
+
width: 100%;
354
+
height: 100%;
355
+
flex-direction: row;
356
+
justify-content: space-between;
357
+
align-items: center;
358
+
background-color: var(--background-color);
359
+
color: var(--text-color);
360
+
gap: 24px;
361
+
}
362
+
363
+
#Feed {
364
+
overflow-y: auto;
365
+
width: 65%;
366
+
height: 100vh;
367
+
padding-right: 16px;
368
+
align-self: flex-start;
369
+
}
370
+
371
+
#spacer {
372
+
padding: 0;
373
+
margin: 0;
374
+
height: 10vh;
375
+
width: 100%;
376
+
}
377
+
378
+
#Account {
379
+
width: 35%;
380
+
display: flex;
381
+
flex-direction: column;
382
+
border: 1px solid var(--border-color);
383
+
background-color: var(--content-background-color);
384
+
max-height: 80vh;
385
+
padding: 24px;
386
+
margin-left: 16px;
387
+
border-radius: 12px;
388
+
box-shadow: var(--card-shadow);
389
+
}
390
+
391
+
#accountsList {
392
+
display: flex;
393
+
flex-direction: column;
394
+
overflow-y: auto;
395
+
height: 100%;
396
+
width: 100%;
397
+
padding: 8px 0;
398
+
margin: 0;
399
+
}
400
+
401
+
#Header {
402
+
text-align: center;
403
+
font-size: 1.8em;
404
+
margin-bottom: 16px;
405
+
color: var(--accent);
406
+
}
407
+
408
+
/* Mobile Styles */
409
+
@media screen and (max-width: 768px) {
410
+
#Content {
411
+
flex-direction: column;
412
+
width: auto;
413
+
padding: 12px;
414
+
margin-top: 0;
415
+
}
416
+
417
+
#Account {
418
+
width: calc(100% - 32px);
419
+
padding: 16px;
420
+
margin-bottom: 20px;
421
+
margin-left: 0;
422
+
margin-right: 0;
423
+
height: auto;
424
+
order: -1;
425
+
}
426
+
427
+
#Feed {
428
+
width: 100%;
429
+
margin: 0;
430
+
padding: 0;
431
+
overflow-y: visible;
432
+
}
433
+
434
+
#spacer {
435
+
height: 5vh;
436
+
}
437
+
438
+
body {
439
+
font-size: 16px;
440
+
}
441
+
442
+
#postHeader {
443
+
padding: 10px;
444
+
height: auto;
445
+
min-height: 50px;
446
+
}
447
+
}
448
+
449
+
/* Scrollbar Styles */
450
+
::-webkit-scrollbar {
451
+
width: 0px;
452
+
background: transparent;
453
+
padding: 0;
454
+
margin: 0;
455
+
}
456
+
457
+
::-webkit-scrollbar-thumb {
458
+
background: transparent;
459
+
border-radius: 0;
460
+
}
461
+
462
+
::-webkit-scrollbar-track {
463
+
background: transparent;
464
+
border-radius: 0;
465
+
}
466
+
467
+
::-webkit-scrollbar-corner {
468
+
background: transparent;
469
+
border-radius: 0;
470
+
}
471
+
472
+
::-webkit-scrollbar-button {
473
+
background: transparent;
474
+
border-radius: 0;
475
+
}
476
+
477
+
* {
478
+
scrollbar-width: none;
479
+
scrollbar-color: transparent transparent;
480
+
-ms-overflow-style: none;
481
+
/* IE and Edge */
482
+
-webkit-overflow-scrolling: touch;
483
+
-webkit-scrollbar: none;
484
+
/* Safari */
485
+
}