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