pdewey.com
forked from
baileytownsend.dev/pds-dash-fork
A fork of pds-dash-fork for arabica.systems
baileytownsend.dev
1/* Modern Theme for pds-dash */
2
3:root {
4 /* Modern color palette */
5 --primary-h: 243;
6 --link-color: hsl(var(--primary-h), 73%, 59%);
7 --link-hover-color: #4338ca;
8 --time-color: #8b5cf6;
9 --background-color: #f8fafc;
10 --header-background-color: #ffffff;
11 --content-background-color: #ffffff;
12 --text-color: #111827;
13 --text-secondary-color: #4b5563;
14 --border-color: #e2e8f0;
15 --indicator-inactive-color: #cbd5e1;
16 --indicator-active-color: #6366f1;
17
18 /* Modern shadows */
19 --button-hover: #f3f4f6;
20}
21
22body {
23 margin: 0;
24 display: flex;
25 place-items: center;
26 min-width: 320px;
27 min-height: 100vh;
28 background-color: var(--background-color);
29 font-family:
30 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
31 Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
32 font-size: 18px;
33 line-height: 1.5;
34 color: var(--text-color);
35 border-color: var(--border-color);
36 overflow-wrap: break-word;
37 word-break: break-word;
38 hyphens: none;
39}
40
41a {
42 font-weight: 500;
43 color: var(--link-color);
44 text-decoration: none;
45 transition: color 0.15s ease;
46}
47a:hover {
48 color: var(--link-hover-color);
49}
50
51h1 {
52 font-size: 2.5em;
53 line-height: 1.2;
54 font-weight: 700;
55}
56
57#app {
58 max-width: 1400px;
59 width: 100%;
60 margin: 0 auto;
61 padding: 0;
62 text-align: center;
63}
64
65/* Post Component */
66#postContainer {
67 display: flex;
68 flex-direction: column;
69 border-radius: 12px;
70 border: 1px solid var(--border-color);
71 background-color: var(--content-background-color);
72 margin-bottom: 20px;
73 overflow-wrap: break-word;
74 overflow: hidden;
75 box-shadow: var(--card-shadow);
76 transition: transform 0.2s ease, box-shadow 0.2s ease;
77}
78
79#postContainer:hover {
80 transform: translateY(-2px);
81 box-shadow:
82 0 10px 15px -3px rgba(0, 0, 0, 0.1),
83 0 4px 6px -2px rgba(0, 0, 0, 0.05);
84}
85
86#postHeader {
87 display: flex;
88 flex-direction: row;
89 align-items: center;
90 justify-content: start;
91 background-color: var(--header-background-color);
92 padding: 12px 16px;
93 height: 60px;
94 border-bottom: 1px solid var(--border-color);
95 font-weight: 600;
96 overflow-wrap: break-word;
97}
98
99#displayName {
100 display: block;
101 color: var(--text-color);
102 font-size: 1.1em;
103 padding: 0;
104 margin: 0 0 2px 0;
105 text-overflow: ellipsis;
106 overflow: hidden;
107 white-space: nowrap;
108 width: 100%;
109 letter-spacing: -0.01em;
110}
111
112#handle {
113 display: flex;
114 align-items: center;
115 color: #6b7280;
116 font-size: 0.85em;
117 font-weight: 400;
118 padding: 0;
119 margin: 0;
120 gap: 8px;
121}
122
123#postLink {
124 color: var(--time-color);
125 font-size: 0.85em;
126 padding: 0;
127 margin: 0;
128 opacity: 0.9;
129}
130
131#postContent {
132 display: flex;
133 text-align: start;
134 flex-direction: column;
135 padding: 16px;
136 background-color: var(--content-background-color);
137 color: var(--text-color);
138 overflow-wrap: break-word;
139 white-space: pre-line;
140 line-height: 1.6;
141}
142
143#replyingText, #quotingText {
144 font-size: 0.8em;
145 margin: 0;
146 padding: 0 0 10px 0;
147 color: #6b7280;
148}
149
150#postText {
151 margin: 0 0 8px 0;
152 padding: 0;
153 overflow-wrap: break-word;
154 word-break: break-word;
155 hyphens: none;
156 font-size: 1.05em;
157}
158
159#headerText {
160 margin-left: 12px;
161 font-size: 0.9em;
162 text-align: start;
163 word-break: break-word;
164 max-width: 80%;
165 max-height: 95%;
166 overflow: hidden;
167 align-self: flex-start;
168 margin-top: auto;
169 margin-bottom: auto;
170}
171
172#carouselContainer {
173 position: relative;
174 width: 100%;
175 margin-top: 12px;
176 display: flex;
177 flex-direction: column;
178 align-items: center;
179 border-radius: 8px;
180 overflow: hidden;
181}
182
183#carouselControls {
184 display: flex;
185 justify-content: space-between;
186 align-items: center;
187 width: 100%;
188 max-width: 500px;
189 margin-top: 10px;
190}
191
192#carouselIndicators {
193 display: flex;
194 gap: 6px;
195}
196
197.indicator {
198 width: 6px;
199 height: 6px;
200 background-color: var(--indicator-inactive-color);
201 border-radius: 50%;
202 transition: background-color 0.2s ease, transform 0.2s ease;
203}
204
205.indicator.active {
206 background-color: var(--indicator-active-color);
207 transform: scale(1.3);
208}
209
210#prevBtn,
211#nextBtn {
212 background-color: var(--button-bg);
213 color: var(--text-color);
214 border: 1px solid var(--border-color);
215 width: 32px;
216 height: 32px;
217 cursor: pointer;
218 display: flex;
219 align-items: center;
220 justify-content: center;
221 border-radius: 50%;
222 transition: background-color 0.15s ease, transform 0.15s ease;
223 font-size: 16px;
224}
225
226#prevBtn:hover:not(:disabled),
227#nextBtn:hover:not(:disabled) {
228 background-color: var(--button-hover);
229 transform: scale(1.05);
230}
231
232#prevBtn:disabled,
233#nextBtn:disabled {
234 opacity: 0.4;
235 cursor: not-allowed;
236}
237
238#embedVideo {
239 width: 100%;
240 max-width: 500px;
241 margin-top: 12px;
242 align-self: center;
243 border-radius: 8px;
244 overflow: hidden;
245}
246
247#embedImages {
248 min-width: min(100%, 500px);
249 max-width: min(100%, 500px);
250 max-height: 500px;
251 object-fit: contain;
252 margin: 0;
253 border-radius: 8px;
254}
255
256/* Account Component */
257#accountContainer {
258 display: flex;
259 text-align: start;
260 align-items: center;
261 background-color: var(--content-background-color);
262 padding: 12px;
263 margin-bottom: 15px;
264 border: 1px solid var(--border-color);
265 border-radius: 12px;
266 transition: background-color 0.15s ease;
267}
268
269#accountContainer:hover {
270 background-color: var(--hover-bg);
271}
272
273#accountName {
274 margin-left: 12px;
275 font-size: 0.95em;
276 max-width: 80%;
277 overflow: hidden;
278 text-overflow: ellipsis;
279 white-space: nowrap;
280 font-weight: 500;
281}
282
283#avatar {
284 width: 48px;
285 height: 48px;
286 margin: 0;
287 object-fit: cover;
288 border-radius: 50%;
289 border: 2px solid white;
290 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
291}
292
293/* App.Svelte Layout */
294#Content {
295 display: flex;
296 width: 100%;
297 height: 100%;
298 flex-direction: row;
299 justify-content: space-between;
300 align-items: center;
301 background-color: var(--background-color);
302 color: var(--text-color);
303 gap: 24px;
304}
305
306#Feed {
307 overflow-y: auto;
308 width: 65%;
309 height: 100vh;
310 padding-right: 16px;
311 align-self: flex-start;
312}
313
314#spacer {
315 padding: 0;
316 margin: 0;
317 height: 10vh;
318 width: 100%;
319}
320
321#Account {
322 width: 35%;
323 display: flex;
324 flex-direction: column;
325 border: 1px solid var(--border-color);
326 background-color: var(--content-background-color);
327 max-height: 80vh;
328 padding: 24px;
329 margin-left: 16px;
330 border-radius: 12px;
331 box-shadow: var(--card-shadow);
332}
333
334#accountsList {
335 display: flex;
336 flex-direction: column;
337 overflow-y: auto;
338 height: 100%;
339 width: 100%;
340 padding: 8px 0;
341 margin: 0;
342}
343
344#Header {
345 text-align: center;
346 font-size: 1.8em;
347 margin-bottom: 16px;
348 font-weight: 700;
349 background: linear-gradient(to right, var(--link-color), #8b5cf6);
350 -webkit-background-clip: text;
351 -webkit-text-fill-color: transparent;
352 background-clip: text;
353}
354
355/* Mobile Styles */
356@media screen and (max-width: 768px) {
357 #Content {
358 flex-direction: column;
359 width: auto;
360 padding: 12px;
361 margin-top: 0;
362 }
363
364 #Account {
365 width: calc(100% - 32px);
366 padding: 16px;
367 margin-bottom: 20px;
368 margin-left: 0;
369 margin-right: 0;
370 height: auto;
371 order: -1;
372 }
373
374 #Feed {
375 width: 100%;
376 margin: 0;
377 padding: 0;
378 overflow-y: visible;
379 }
380
381 #spacer {
382 height: 5vh;
383 }
384
385 body {
386 font-size: 16px;
387 }
388
389 #postHeader {
390 padding: 10px;
391 height: auto;
392 min-height: 50px;
393 }
394}
395
396/* Scrollbar Styles */
397::-webkit-scrollbar {
398 width: 0px;
399 background: transparent;
400 padding: 0;
401 margin: 0;
402}
403::-webkit-scrollbar-thumb {
404 background: transparent;
405 border-radius: 0;
406}
407::-webkit-scrollbar-track {
408 background: transparent;
409 border-radius: 0;
410}
411::-webkit-scrollbar-corner {
412 background: transparent;
413 border-radius: 0;
414}
415::-webkit-scrollbar-button {
416 background: transparent;
417 border-radius: 0;
418}
419
420* {
421 scrollbar-width: none;
422 scrollbar-color: transparent transparent;
423 -ms-overflow-style: none; /* IE and Edge */
424 -webkit-overflow-scrolling: touch;
425 -webkit-scrollbar: none; /* Safari */
426}