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