A fork of pds-dash for selfhosted.social
baileytownsend.dev
1/* Modern Theme for pds-dash */
2
3* {
4 box-sizing: border-box;
5}
6
7html {
8 overflow-x: hidden;
9 width: 100%;
10}
11
12:root {
13 /* Dark theme derived from provided OKLCH palette */
14 color-scheme: dark;
15
16 /* Base and content colors */
17 --color-base-100: oklch(25.33% 0.016 252.42);
18 --color-base-200: oklch(23.26% 0.014 253.1);
19 --color-base-300: oklch(21.15% 0.012 254.09);
20 --color-base-content: oklch(97.807% 0.029 256.847);
21
22 /* Brand and semantic colors */
23 --color-primary: oklch(58% 0.233 277.117);
24 --color-primary-content: oklch(96% 0.018 272.314);
25 --color-secondary: oklch(65% 0.241 354.308);
26 --color-secondary-content: oklch(94% 0.028 342.258);
27 --color-accent: oklch(77% 0.152 181.912);
28 --color-accent-content: oklch(38% 0.063 188.416);
29 --color-neutral: oklch(14% 0.005 285.823);
30 --color-neutral-content: oklch(92% 0.004 286.32);
31 --color-info: oklch(74% 0.16 232.661);
32 --color-info-content: oklch(29% 0.066 243.157);
33 --color-success: oklch(76% 0.177 163.223);
34 --color-success-content: oklch(37% 0.077 168.94);
35 --color-warning: oklch(82% 0.189 84.429);
36 --color-warning-content: oklch(41% 0.112 45.904);
37 --color-error: oklch(71% 0.194 13.428);
38 --color-error-content: oklch(27% 0.105 12.094);
39
40 /* Radii, sizes, borders */
41 --radius-selector: 0.5rem;
42 --radius-field: 0.25rem;
43 --radius-box: 0.5rem;
44 --size-selector: 0.25rem;
45 --size-field: 0.25rem;
46 --border: 1px;
47 --depth: 1;
48 --noise: 0;
49
50 /* Map existing theme variables to the new palette for minimal changes elsewhere */
51 --background-color: var(--color-base-300);
52 --header-background-color: var(--color-base-200);
53 --content-background-color: var(--color-base-200);
54 --text-color: var(--color-base-content);
55 --text-secondary-color: color-mix(
56 in oklab,
57 var(--color-base-content) 70%,
58 var(--color-base-100)
59 );
60 --border-color: var(--color-base-300);
61 --link-color: var(--color-primary);
62 --link-hover-color: var(--color-primary-content);
63 --time-color: var(--color-secondary);
64 --indicator-inactive-color: var(--color-base-300);
65 --indicator-active-color: var(--color-primary);
66
67 /* Subtle hover background for dark */
68 --button-hover: color-mix(
69 in oklab,
70 var(--color-base-200) 80%,
71 var(--color-base-content)
72 );
73}
74
75body {
76 margin: 0;
77 padding: 0;
78 min-width: 320px;
79 min-height: 100vh;
80 background-color: var(--background-color);
81 font-family:
82 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
83 Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
84 font-size: 18px;
85 line-height: 1.5;
86 color: var(--text-color);
87 border-color: var(--border-color);
88 overflow-wrap: break-word;
89 word-break: break-word;
90 hyphens: none;
91 overflow-x: hidden;
92}
93
94a {
95 font-weight: 500;
96 color: var(--link-color);
97 text-decoration: none;
98 transition: color 0.15s ease;
99}
100a:hover {
101 color: var(--link-hover-color);
102}
103
104h1 {
105 font-size: 2.5em;
106 line-height: 1.2;
107 font-weight: 700;
108}
109
110#app {
111 max-width: 1400px;
112 width: 100%;
113 margin: 0 auto;
114 padding: 0;
115 text-align: center;
116}
117
118/* Post Component */
119#postContainer {
120 display: flex;
121 flex-direction: column;
122 border-radius: 12px;
123 border: 1px solid var(--border-color);
124 background-color: var(--content-background-color);
125 margin-bottom: 20px;
126 overflow-wrap: break-word;
127 overflow: hidden;
128 box-shadow: var(--card-shadow);
129 transition: transform 0.2s ease, box-shadow 0.2s ease;
130}
131
132#postContainer:hover {
133 transform: translateY(-2px);
134 box-shadow:
135 0 10px 15px -3px rgba(0, 0, 0, 0.1),
136 0 4px 6px -2px rgba(0, 0, 0, 0.05);
137}
138
139#postHeader {
140 display: flex;
141 flex-direction: row;
142 align-items: center;
143 justify-content: start;
144 background-color: var(--header-background-color);
145 padding: 12px 16px;
146 height: 60px;
147 border-bottom: 1px solid var(--border-color);
148 font-weight: 600;
149 overflow-wrap: break-word;
150}
151
152#displayName {
153 display: block;
154 color: var(--text-color);
155 font-size: 1.1em;
156 padding: 0;
157 margin: 0 0 2px 0;
158 text-overflow: ellipsis;
159 overflow: hidden;
160 white-space: nowrap;
161 width: 100%;
162 letter-spacing: -0.01em;
163}
164
165#handle {
166 display: flex;
167 align-items: center;
168 color: #6b7280;
169 font-size: 0.85em;
170 font-weight: 400;
171 padding: 0;
172 margin: 0;
173 gap: 8px;
174}
175
176#postLink {
177 color: var(--time-color) !important;
178 font-size: 0.85em;
179 padding: 0;
180 margin: 0;
181 opacity: 0.9;
182}
183
184#postContent {
185 display: flex;
186 text-align: start;
187 flex-direction: column;
188 padding: 16px;
189 background-color: var(--content-background-color);
190 color: var(--text-color);
191 overflow-wrap: break-word;
192 white-space: pre-line;
193 line-height: 1.6;
194}
195
196#replyingText, #quotingText {
197 font-size: 0.8em;
198 margin: 0;
199 padding: 0 0 10px 0;
200 color: #6b7280;
201}
202
203#postText {
204 margin: 0 0 8px 0;
205 padding: 0;
206 overflow-wrap: break-word;
207 word-break: break-word;
208 hyphens: none;
209 font-size: 1.05em;
210}
211
212#headerText {
213 margin-left: 12px;
214 font-size: 0.9em;
215 text-align: start;
216 word-break: break-word;
217 max-width: 80%;
218 max-height: 95%;
219 align-self: flex-start;
220 margin-top: auto;
221 margin-bottom: auto;
222}
223
224#carouselContainer {
225 position: relative;
226 width: 100%;
227 margin-top: 12px;
228 display: flex;
229 flex-direction: column;
230 align-items: center;
231 border-radius: 8px;
232 overflow: hidden;
233}
234
235#carouselControls {
236 display: flex;
237 justify-content: space-between;
238 align-items: center;
239 width: 100%;
240 max-width: 500px;
241 margin-top: 10px;
242}
243
244#carouselIndicators {
245 display: flex;
246 gap: 6px;
247}
248
249.indicator {
250 width: 6px;
251 height: 6px;
252 background-color: var(--indicator-inactive-color);
253 border-radius: 50%;
254 transition: background-color 0.2s ease, transform 0.2s ease;
255}
256
257.indicator.active {
258 background-color: var(--indicator-active-color);
259 transform: scale(1.3);
260}
261
262#prevBtn,
263#nextBtn {
264 background-color: var(--button-bg);
265 color: var(--text-color);
266 border: 1px solid var(--border-color);
267 width: 32px;
268 height: 32px;
269 cursor: pointer;
270 display: flex;
271 align-items: center;
272 justify-content: center;
273 border-radius: 50%;
274 transition: background-color 0.15s ease, transform 0.15s ease;
275 font-size: 16px;
276}
277
278#prevBtn:hover:not(:disabled),
279#nextBtn:hover:not(:disabled) {
280 background-color: var(--button-hover);
281 transform: scale(1.05);
282}
283
284#prevBtn:disabled,
285#nextBtn:disabled {
286 opacity: 0.4;
287 cursor: not-allowed;
288}
289
290#embedVideo {
291 width: 100%;
292 max-width: 500px;
293 margin-top: 12px;
294 align-self: center;
295 border-radius: 8px;
296 overflow: hidden;
297}
298
299#embedImages {
300 min-width: min(100%, 500px);
301 max-width: min(100%, 500px);
302 max-height: 500px;
303 object-fit: contain;
304 margin: 0;
305 border-radius: 8px;
306}
307
308/* Account Component */
309#accountContainer {
310 display: flex;
311 text-align: start;
312 align-items: center;
313 background-color: var(--content-background-color);
314 padding: 12px;
315 margin-bottom: 15px;
316 border: 1px solid var(--border-color);
317 border-radius: 12px;
318 transition: background-color 0.15s ease;
319}
320
321#accountContainer:hover {
322 background-color: var(--hover-bg);
323}
324
325#accountName {
326 margin-left: 12px;
327 font-size: 0.95em;
328 max-width: 80%;
329 overflow: hidden;
330 text-overflow: ellipsis;
331 white-space: nowrap;
332 font-weight: 500;
333}
334
335#avatar {
336 width: 48px;
337 height: 48px;
338 margin: 0;
339 object-fit: cover;
340 border-radius: 50%;
341 border: 2px solid white;
342 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
343}
344
345/* App.Svelte Layout */
346#Content {
347 display: flex;
348 width: 100%;
349 max-width: 100vw;
350 height: 100%;
351 flex-direction: row;
352 justify-content: space-between;
353 align-items: flex-start;
354 background-color: var(--background-color);
355 color: var(--text-color);
356 gap: 20px;
357 padding: 0 16px;
358}
359
360#Feed {
361 overflow-y: auto;
362 flex: 1;
363 min-width: 0;
364 height: 100vh;
365 align-self: flex-start;
366}
367
368#spacer {
369 padding: 0;
370 margin: 0;
371 height: 10vh;
372 width: 100%;
373}
374
375#Account {
376 flex: 0 0 400px;
377 max-width: 400px;
378 display: flex;
379 flex-direction: column;
380 border: 1px solid var(--border-color);
381 background-color: var(--content-background-color);
382 max-height: 80vh;
383 padding: 24px;
384 border-radius: 12px;
385 box-shadow: var(--card-shadow);
386}
387
388#accountsList {
389 display: flex;
390 flex-direction: column;
391 overflow-y: auto;
392 height: 100%;
393 width: 100%;
394 padding: 8px 0;
395 margin: 0;
396}
397
398#Header {
399 text-align: center;
400 font-size: 1.8em;
401 margin-bottom: 16px;
402 font-weight: 700;
403 background: linear-gradient(to right, var(--link-color), #8b5cf6);
404 -webkit-background-clip: text;
405 -webkit-text-fill-color: transparent;
406 background-clip: text;
407}
408
409/* Mobile Styles */
410@media screen and (max-width: 768px) {
411 #Content {
412 flex-direction: column;
413 width: 100%;
414 max-width: 100vw;
415 padding: 12px;
416 margin: 0;
417 gap: 16px;
418 }
419
420 #Account {
421 flex: 1 1 auto;
422 width: 100%;
423 max-width: 100%;
424 padding: 16px;
425 margin: 0;
426 height: auto;
427 order: -1;
428 }
429
430 #Feed {
431 flex: 1 1 auto;
432 width: 100%;
433 margin: 0;
434 padding: 0;
435 overflow-y: visible;
436 }
437
438 #spacer {
439 height: 5vh;
440 }
441
442 body {
443 font-size: 16px;
444 }
445
446 #postHeader {
447 padding: 10px;
448 height: auto;
449 min-height: 50px;
450 }
451}
452
453/* Scrollbar Styles */
454::-webkit-scrollbar {
455 width: 0px;
456 background: transparent;
457 padding: 0;
458 margin: 0;
459}
460::-webkit-scrollbar-thumb {
461 background: transparent;
462 border-radius: 0;
463}
464::-webkit-scrollbar-track {
465 background: transparent;
466 border-radius: 0;
467}
468::-webkit-scrollbar-corner {
469 background: transparent;
470 border-radius: 0;
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; /* IE and Edge */
481 -webkit-overflow-scrolling: touch;
482 -webkit-scrollbar: none; /* Safari */
483}
484