attpslabs.com
forked from
baileytownsend.dev/pds-dash-fork
A fork of selfhosted.social for self.surf
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
94code {
95 background-color: rgba(255, 255, 255, 0.1);
96 padding: 0.15rem 0.4rem;
97 border-radius: 4px;
98 font-size: 0.9em;
99}
100
101a {
102 font-weight: 500;
103 color: var(--link-color);
104 text-decoration: none;
105 transition: color 0.15s ease;
106}
107a:hover {
108 color: var(--link-hover-color);
109}
110
111h1 {
112 font-size: 2.5em;
113 line-height: 1.2;
114 font-weight: 700;
115}
116
117#app {
118 max-width: 1400px;
119 width: 100%;
120 margin: 0 auto;
121 padding: 0;
122 text-align: center;
123}
124
125/* Post Component */
126#postContainer {
127 display: flex;
128 flex-direction: column;
129 border-radius: 12px;
130 border: 1px solid var(--border-color);
131 background-color: var(--content-background-color);
132 margin-bottom: 20px;
133 overflow-wrap: break-word;
134 overflow: hidden;
135 box-shadow: var(--card-shadow);
136 transition: transform 0.2s ease, box-shadow 0.2s ease;
137}
138
139#postContainer:hover {
140 transform: translateY(-2px);
141 box-shadow:
142 0 10px 15px -3px rgba(0, 0, 0, 0.1),
143 0 4px 6px -2px rgba(0, 0, 0, 0.05);
144}
145
146#postHeader {
147 display: flex;
148 flex-direction: row;
149 align-items: center;
150 justify-content: start;
151 background-color: var(--header-background-color);
152 padding: 12px 16px;
153 height: 60px;
154 border-bottom: 1px solid var(--border-color);
155 font-weight: 600;
156 overflow-wrap: break-word;
157}
158
159#displayName {
160 display: block;
161 color: var(--text-color);
162 font-size: 1.1em;
163 padding: 0;
164 margin: 0 0 2px 0;
165 text-overflow: ellipsis;
166 overflow: hidden;
167 white-space: nowrap;
168 width: 100%;
169 letter-spacing: -0.01em;
170}
171
172#handle {
173 display: flex;
174 align-items: center;
175 color: #6b7280;
176 font-size: 0.85em;
177 font-weight: 400;
178 padding: 0;
179 margin: 0;
180 gap: 8px;
181}
182
183#postLink {
184 color: var(--time-color) !important;
185 font-size: 0.85em;
186 padding: 0;
187 margin: 0;
188 opacity: 0.9;
189}
190
191#postContent {
192 display: flex;
193 text-align: start;
194 flex-direction: column;
195 padding: 16px;
196 background-color: var(--content-background-color);
197 color: var(--text-color);
198 overflow-wrap: break-word;
199 white-space: pre-line;
200 line-height: 1.6;
201}
202
203#replyingText, #quotingText {
204 font-size: 0.8em;
205 margin: 0;
206 padding: 0 0 10px 0;
207 color: #6b7280;
208}
209
210#postText {
211 margin: 0 0 8px 0;
212 padding: 0;
213 overflow-wrap: break-word;
214 word-break: break-word;
215 hyphens: none;
216 font-size: 1.05em;
217}
218
219#headerText {
220 margin-left: 12px;
221 font-size: 0.9em;
222 text-align: start;
223 word-break: break-word;
224 max-width: 80%;
225 max-height: 95%;
226 align-self: flex-start;
227 margin-top: auto;
228 margin-bottom: auto;
229}
230
231#carouselContainer {
232 position: relative;
233 width: 100%;
234 margin-top: 12px;
235 display: flex;
236 flex-direction: column;
237 align-items: center;
238 border-radius: 8px;
239 overflow: hidden;
240}
241
242#carouselControls {
243 display: flex;
244 justify-content: space-between;
245 align-items: center;
246 width: 100%;
247 max-width: 500px;
248 margin-top: 10px;
249}
250
251#carouselIndicators {
252 display: flex;
253 gap: 6px;
254}
255
256.indicator {
257 width: 6px;
258 height: 6px;
259 background-color: var(--indicator-inactive-color);
260 border-radius: 50%;
261 transition: background-color 0.2s ease, transform 0.2s ease;
262}
263
264.indicator.active {
265 background-color: var(--indicator-active-color);
266 transform: scale(1.3);
267}
268
269#prevBtn,
270#nextBtn {
271 background-color: var(--button-bg);
272 color: var(--text-color);
273 border: 1px solid var(--border-color);
274 width: 32px;
275 height: 32px;
276 cursor: pointer;
277 display: flex;
278 align-items: center;
279 justify-content: center;
280 border-radius: 50%;
281 transition: background-color 0.15s ease, transform 0.15s ease;
282 font-size: 16px;
283}
284
285#prevBtn:hover:not(:disabled),
286#nextBtn:hover:not(:disabled) {
287 background-color: var(--button-hover);
288 transform: scale(1.05);
289}
290
291#prevBtn:disabled,
292#nextBtn:disabled {
293 opacity: 0.4;
294 cursor: not-allowed;
295}
296
297#embedVideo {
298 width: 100%;
299 max-width: 500px;
300 margin-top: 12px;
301 align-self: center;
302 border-radius: 8px;
303 overflow: hidden;
304}
305
306#embedImages {
307 min-width: min(100%, 500px);
308 max-width: min(100%, 500px);
309 max-height: 500px;
310 object-fit: contain;
311 margin: 0;
312 border-radius: 8px;
313}
314
315/* Account Component */
316#accountContainer {
317 display: flex;
318 text-align: start;
319 align-items: center;
320 background-color: var(--content-background-color);
321 padding: 12px;
322 margin-bottom: 15px;
323 border: 1px solid var(--border-color);
324 border-radius: 12px;
325 transition: background-color 0.15s ease;
326}
327
328#accountContainer:hover {
329 background-color: var(--hover-bg);
330}
331
332#accountName {
333 margin-left: 12px;
334 font-size: 0.95em;
335 max-width: 80%;
336 overflow: hidden;
337 text-overflow: ellipsis;
338 white-space: nowrap;
339 font-weight: 500;
340}
341
342#avatar {
343 width: 48px;
344 height: 48px;
345 margin: 0;
346 object-fit: cover;
347 border-radius: 50%;
348 border: 2px solid white;
349 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
350}
351
352/* App.Svelte Layout */
353#Content {
354 display: flex;
355 width: 100%;
356 max-width: 100vw;
357 height: 100%;
358 flex-direction: row;
359 justify-content: space-between;
360 align-items: flex-start;
361 background-color: var(--background-color);
362 color: var(--text-color);
363 gap: 20px;
364 padding: 0 16px;
365}
366
367#Feed {
368 overflow-y: auto;
369 flex: 1;
370 min-width: 0;
371 height: 100vh;
372 align-self: flex-start;
373}
374
375#spacer {
376 padding: 0;
377 margin: 0;
378 height: 10vh;
379 width: 100%;
380}
381
382#Account {
383 flex: 0 0 400px;
384 max-width: 400px;
385 display: flex;
386 flex-direction: column;
387 border: 1px solid var(--border-color);
388 background-color: var(--content-background-color);
389 max-height: 80vh;
390 padding: 24px;
391 border-radius: 12px;
392 box-shadow: var(--card-shadow);
393}
394
395#accountsList {
396 display: flex;
397 flex-direction: column;
398 overflow-y: auto;
399 height: 100%;
400 width: 100%;
401 padding: 8px 0;
402 margin: 0;
403}
404
405#Header {
406 text-align: center;
407 font-size: 1.8em;
408 margin-bottom: 16px;
409 font-weight: 700;
410 background: linear-gradient(to right, var(--link-color), #8b5cf6);
411 -webkit-background-clip: text;
412 -webkit-text-fill-color: transparent;
413 background-clip: text;
414}
415
416/* Mobile Styles */
417@media screen and (max-width: 768px) {
418 #Content {
419 flex-direction: column;
420 width: 100%;
421 max-width: 100vw;
422 padding: 12px;
423 margin: 0;
424 gap: 16px;
425 }
426
427 #Account {
428 flex: 1 1 auto;
429 width: 100%;
430 max-width: 100%;
431 padding: 16px;
432 margin: 0;
433 height: auto;
434 order: -1;
435 }
436
437 #Feed {
438 flex: 1 1 auto;
439 width: 100%;
440 margin: 0;
441 padding: 0;
442 overflow-y: visible;
443 }
444
445 #spacer {
446 height: 5vh;
447 }
448
449 body {
450 font-size: 16px;
451 }
452
453 #postHeader {
454 padding: 10px;
455 height: auto;
456 min-height: 50px;
457 }
458}
459
460/* Scrollbar Styles */
461::-webkit-scrollbar {
462 width: 0px;
463 background: transparent;
464 padding: 0;
465 margin: 0;
466}
467::-webkit-scrollbar-thumb {
468 background: transparent;
469 border-radius: 0;
470}
471::-webkit-scrollbar-track {
472 background: transparent;
473 border-radius: 0;
474}
475::-webkit-scrollbar-corner {
476 background: transparent;
477 border-radius: 0;
478}
479::-webkit-scrollbar-button {
480 background: transparent;
481 border-radius: 0;
482}
483
484* {
485 scrollbar-width: none;
486 scrollbar-color: transparent transparent;
487 -ms-overflow-style: none; /* IE and Edge */
488 -webkit-overflow-scrolling: touch;
489 -webkit-scrollbar: none; /* Safari */
490}
491