xan.lol
forked from
atpota.to/flushes.app
The 1st decentralized social network for sharing when you're on the toilet. Post a "flush" today! Powered by the AT Protocol.
1.container {
2 max-width: 800px;
3 margin: 0 auto;
4 padding: 2rem 1rem;
5}
6
7/* Main Header - Copied from dashboard styles */
8.header {
9 display: flex;
10 justify-content: space-between;
11 align-items: flex-start;
12 margin-bottom: 2rem;
13 flex-wrap: wrap;
14 gap: 1rem;
15}
16
17.headerContent {
18 flex: 1 1 300px;
19 min-width: 0;
20}
21
22.title {
23 font-size: 2.5rem;
24 margin-bottom: 0.25rem;
25 color: var(--primary-color);
26 word-wrap: break-word;
27 hyphens: auto;
28 line-height: 1.2;
29}
30
31.subtitle {
32 font-size: 1rem;
33 color: var(--timestamp-color);
34 margin: 0 0 0.5rem 0;
35 font-weight: normal;
36 word-wrap: break-word;
37}
38
39.description {
40 font-size: 1.1rem;
41 color: var(--text-color);
42 margin: 0;
43 line-height: 1.5;
44 word-wrap: break-word;
45}
46
47.creditLine {
48 display: block;
49 font-size: 0.85rem;
50 margin-top: 0.5rem;
51 color: var(--timestamp-color);
52}
53
54.kofiLink {
55 color: var(--primary-color);
56 text-decoration: none;
57 transition: color 0.2s;
58}
59
60.kofiLink:hover {
61 text-decoration: underline;
62}
63
64.headerActions {
65 display: flex;
66 gap: 1rem;
67 align-items: center;
68}
69
70.userInfo {
71 color: var(--text-color);
72 font-weight: 500;
73 text-decoration: none;
74 transition: color 0.2s;
75}
76
77.userInfo:hover {
78 color: var(--primary-color);
79 text-decoration: underline;
80}
81
82.logoutButton {
83 background-color: transparent;
84 color: var(--primary-color);
85 border: 1px solid var(--primary-color);
86 padding: 0.3rem 0.8rem;
87 font-size: 0.9rem;
88 border-radius: 4px;
89 cursor: pointer;
90 transition: all 0.2s;
91}
92
93.logoutButton:hover {
94 background-color: rgba(91, 173, 240, 0.1);
95}
96
97.loginButton {
98 display: inline-block;
99 background-color: var(--primary-color);
100 color: white;
101 padding: 0.6rem 1.2rem;
102 border-radius: 4px;
103 font-size: 1rem;
104 font-weight: 500;
105 transition: all 0.2s ease;
106 text-decoration: none;
107}
108
109.loginButton:hover {
110 background-color: var(--secondary-color);
111 /* Removed transform and box-shadow to prevent movement */
112}
113
114/* Stats Page Specific Styles */
115.statsHeader {
116 text-align: left;
117 margin-bottom: 0.5rem;
118}
119
120.statsHeader h2 {
121 font-size: 2rem;
122 margin-bottom: 0.5rem;
123 color: var(--primary-color);
124}
125
126.statsSubtitle {
127 color: var(--text-color);
128 font-size: 1.2rem;
129 margin: 0;
130}
131
132.controls {
133 display: flex;
134 justify-content: flex-start;
135 gap: 1rem;
136 margin-bottom: 2rem;
137}
138
139.refreshButton {
140 background-color: var(--primary-color);
141 color: white;
142 border: none;
143 border-radius: 4px;
144 padding: 0.5rem 1rem;
145 font-size: 1rem;
146 cursor: pointer;
147 transition: background-color 0.2s;
148 padding-top: 10px;
149}
150
151.refreshButton:hover:not(:disabled) {
152 background-color: var(--secondary-color);
153}
154
155.refreshButton:disabled {
156 background-color: #ccc;
157 cursor: not-allowed;
158}
159
160.homeLink {
161 display: inline-block;
162 color: var(--primary-color);
163 text-decoration: none;
164 border: 1px solid var(--primary-color);
165 border-radius: 4px;
166 padding: 0.5rem 1rem;
167 font-size: 1rem;
168 transition: all 0.2s;
169 padding-top: 10px;
170 line-height: 1.3rem;
171}
172
173.homeLink:hover {
174 background-color: rgba(91, 173, 240, 0.1);
175}
176
177.loadingContainer {
178 display: flex;
179 flex-direction: column;
180 align-items: center;
181 justify-content: center;
182 padding: 3rem;
183 text-align: center;
184}
185
186.loader {
187 border: 4px solid var(--input-background);
188 border-top: 4px solid var(--primary-color);
189 border-radius: 50%;
190 width: 40px;
191 height: 40px;
192 animation: spin 1s linear infinite;
193 margin-bottom: 1rem;
194}
195
196@keyframes spin {
197 0% { transform: rotate(0deg); }
198 100% { transform: rotate(360deg); }
199}
200
201.error {
202 background-color: var(--error-background);
203 color: var(--error-color);
204 padding: 1rem;
205 border-radius: 4px;
206 margin-bottom: 1rem;
207}
208
209.emptyState {
210 text-align: center;
211 padding: 3rem;
212 color: var(--text-color);
213}
214
215/* Stats Content Sections */
216.statsContent {
217 display: flex;
218 flex-direction: column;
219 gap: 2rem;
220}
221
222.overallStats, .chartSection, .leaderboardSection, .emojiSection {
223 background: var(--card-background);
224 border-radius: 8px;
225 padding: 1.5rem;
226 border: 1px solid var(--tile-border);
227}
228
229.overallStats h2, .chartSection h2, .leaderboardSection h2, .emojiSection h2 {
230 margin-bottom: 1.5rem;
231 font-size: 1.5rem;
232 text-align: left;
233}
234
235.leaderboardNote {
236 color: var(--timestamp-color);
237 font-size: 0.9rem;
238 margin-top: -1rem;
239 margin-bottom: 1.5rem;
240 text-align: center;
241 font-style: italic;
242}
243
244.plumberProfileLink {
245 display: inline-block;
246 color: var(--primary-color);
247 font-size: 0.95rem;
248 text-decoration: none;
249 margin-bottom: 1.5rem;
250}
251
252.plumberProfileLink:hover {
253 text-decoration: underline;
254}
255
256/* Stats Grid */
257.statsGrid {
258 display: grid;
259 grid-template-columns: repeat(3, 1fr);
260 gap: 1.5rem;
261}
262
263.statCard {
264 background: var(--input-background);
265 padding: 1.5rem;
266 border-radius: 8px;
267 text-align: center;
268 transition: transform 0.2s;
269 border: 1px solid var(--tile-border);
270}
271
272.statCard:hover {
273 /* Removed transform and box-shadow to prevent movement */
274 border-color: var(--primary-color);
275}
276
277.statValue {
278 font-size: 2.5rem;
279 font-weight: bold;
280 color: var(--primary-color);
281 margin-bottom: 0.5rem;
282 margin-top: -10px;
283}
284
285.statLabel {
286 color: var(--text-color);
287 font-size: 1.1rem;
288 line-height: 1.1em;
289}
290
291/* Plumber link styles */
292.plumberLink {
293 color: inherit;
294 text-decoration: none;
295 display: inline-block;
296 transition: transform 0.2s, color 0.2s;
297 position: relative;
298}
299
300.plumberLink:hover {
301 color: #e84142; /* A reddish color for plumber branding */
302 /* Removed transform to prevent movement */
303}
304
305.plumberLink:after {
306 content: '';
307 position: absolute;
308 width: 0;
309 height: 2px;
310 bottom: -2px;
311 left: 0;
312 background-color: #e84142;
313 transition: width 0.3s;
314}
315
316.plumberLink:hover:after {
317 width: 100%;
318}
319
320/* Chart Styles */
321.chartContainer {
322 height: 200px;
323 display: flex;
324 align-items: flex-end;
325 gap: 2px;
326 margin-bottom: 1rem;
327 border-bottom: 1px solid var(--tile-border);
328 overflow-x: auto;
329}
330
331.chartBar {
332 flex: 1;
333 min-width: 10px;
334 border-radius: 2px 2px 0 0;
335 background-color: var(--primary-color);
336 transition: height 0.5s ease;
337}
338
339.chartLegend {
340 display: flex;
341 justify-content: space-between;
342 color: var(--timestamp-color);
343 font-size: 0.9rem;
344}
345
346.noDataMessage {
347 text-align: center;
348 color: var(--timestamp-color);
349 font-style: italic;
350 padding: 2rem 0;
351}
352
353/* Leaderboard Styles */
354.leaderboard {
355 border: 1px solid var(--tile-border);
356 border-radius: 8px;
357 overflow: hidden;
358}
359
360.leaderboardHeader {
361 display: grid;
362 grid-template-columns: 80px 1fr 100px;
363 padding: 1rem;
364 background: var(--input-background);
365 font-weight: bold;
366 color: var(--title-color);
367}
368
369.leaderboardItem {
370 display: grid;
371 grid-template-columns: 80px 1fr 100px;
372 padding: 1rem;
373 border-top: 1px solid var(--tile-border);
374 transition: background-color 0.2s;
375}
376
377.leaderboardItem:hover {
378 background-color: var(--button-hover);
379}
380
381.topRank {
382 background-color: rgba(255, 193, 7, 0.1); /* Gold - 1st place */
383}
384
385.secondRank {
386 background-color: rgba(192, 192, 192, 0.1); /* Silver - 2nd place */
387}
388
389.thirdRank {
390 background-color: rgba(205, 127, 50, 0.1); /* Bronze - 3rd place */
391}
392
393.rank {
394 font-weight: bold;
395 color: var(--text-color);
396}
397
398.user a {
399 color: var(--primary-color);
400 text-decoration: none;
401 font-weight: 500;
402 white-space: nowrap;
403 overflow: hidden;
404 text-overflow: ellipsis;
405 display: block;
406 max-width: 100%;
407}
408
409.user a:hover {
410 text-decoration: underline;
411}
412
413.unknownUser {
414 color: var(--timestamp-color);
415 font-style: italic;
416}
417
418.count {
419 font-weight: 500;
420 text-align: right;
421}
422
423/* Emoji Grid */
424.emojiGrid {
425 display: grid;
426 grid-template-columns: repeat(7, 1fr);
427 gap: 1rem;
428 margin-top: 1.5rem;
429}
430
431.emojiCard {
432 display: flex;
433 flex-direction: column;
434 align-items: center;
435 justify-content: center;
436 background-color: var(--input-background);
437 border-radius: 8px;
438 padding: 1rem 0.5rem;
439 border: 1px solid var(--tile-border);
440 text-align: center;
441}
442
443.emojiCard .emoji {
444 font-size: 1.5rem;
445 margin-bottom: 0.5rem;
446}
447
448.emojiCard .emojiCount {
449 font-weight: bold;
450 color: var(--primary-color);
451 font-size: 1rem;
452}
453
454/* Share Button */
455.shareSection {
456 display: flex;
457 justify-content: center;
458 margin-top: 1rem;
459}
460
461.shareButton {
462 background-color: var(--primary-color);
463 color: white;
464 border: none;
465 border-radius: 4px;
466 padding: 0.75rem 1.5rem;
467 font-size: 1.1rem;
468 cursor: pointer;
469 transition: all 0.2s;
470}
471
472.shareButton:hover {
473 background-color: var(--secondary-color);
474 /* Removed transform and box-shadow to prevent movement */
475}
476
477/* Responsive Adjustments */
478@media (max-width: 600px) {
479 .container {
480 padding: 1rem;
481 }
482
483 /* Header responsive styles - from main page */
484 .header {
485 flex-direction: column;
486 align-items: flex-start;
487 }
488
489 .headerContent {
490 flex: 1 1 100%;
491 text-align: left;
492 }
493
494 .headerActions {
495 width: 100%;
496 justify-content: flex-start;
497 }
498
499 .title {
500 font-size: 2rem;
501 }
502
503 .subtitle {
504 font-size: 1rem;
505 }
506
507 /* Stats page specific responsive */
508 .statsHeader h2 {
509 font-size: 1.7rem;
510 }
511
512 .statsSubtitle {
513 font-size: 1rem;
514 }
515
516 .statsGrid {
517 grid-template-columns: 1fr;
518 gap: 1rem;
519 }
520
521 .statCard {
522 padding: 1rem;
523 }
524
525 .statValue {
526 font-size: 2rem;
527 }
528
529 .chartContainer {
530 height: 150px;
531 }
532
533 .leaderboardHeader, .leaderboardItem {
534 grid-template-columns: 50px 1fr 70px;
535 padding: 0.75rem;
536 font-size: 0.9rem;
537 }
538
539 .user {
540 max-width: 100%;
541 overflow: hidden;
542 }
543
544 .user a, .unknownUser {
545 font-size: 0.85rem;
546 max-width: 100%;
547 }
548
549 /* Emoji grid responsive */
550 .emojiGrid {
551 grid-template-columns: repeat(3, 1fr);
552 gap: 0.75rem;
553 }
554
555 .emojiCard {
556 padding: 0.75rem 0.25rem;
557 }
558
559 .emojiCard .emoji {
560 font-size: 1.75rem;
561 }
562
563 .emojiCard .emojiCount {
564 font-size: 1rem;
565 }
566}
567
568@media (max-width: 400px) {
569 .emojiGrid {
570 grid-template-columns: repeat(2, 1fr);
571 }
572}