oppi.li
selfhostable, read-only reddit client
1:root {
2 /* Light mode colors */
3 --bg-color: white;
4 --bg-color-muted: #eee;
5 --text-color: black;
6 --text-color-muted: #999;
7 --blockquote-color: green;
8 --sticky-color: #dcfeda;
9 --gilded: darkorange;
10 --link-color: #29BC9B;
11 --link-visited-color: #999;
12 --accent: var(--link-color);
13 --error-text-color: red;
14 --border-radius-card: 0.5vmin;
15 --border-radius-media: 0.5vmin;
16 --border-radius-preview: 0.3vmin;
17
18 font-family: Inter, sans-serif;
19 font-feature-settings: 'ss01' 1, 'kern' 1, 'liga' 1, 'cv05' 1, 'dlig' 1, 'ss01' 1, 'ss07' 1, 'ss08' 1;
20
21}
22
23@media (prefers-color-scheme: dark) {
24 :root {
25 --bg-color: black;
26 --bg-color-muted: #333;
27 --text-color: white;
28 --text-color-muted: #999;
29 --blockquote-color: lightgreen;
30 --sticky-color: #014413;
31 --gilded: gold;
32 --link-color: #79ffe1;
33 --link-visited-color: #999;
34 --accent: var(--link-color);
35 --error-text-color: lightcoral;
36 }
37}
38
39@supports (font-variation-settings: normal) {
40 :root { font-family: InterVariable, sans-serif; }
41}
42
43html {
44 scroll-behavior: smooth;
45}
46
47body {
48 overflow-x: hidden;
49 background-color: var(--bg-color);
50 color: var(--text-color);
51}
52
53body.media-maximized {
54 /* Fix for Safari User Agent stylesheet */
55 margin: 0;
56}
57
58body.media-maximized.zoom,
59div.media-maximized.container.zoom {
60 overflow: auto;
61}
62
63img.media-maximized {
64 cursor: zoom-in;
65}
66
67img.media-maximized.zoom {
68 max-width: unset;
69 max-height: unset;
70 cursor: zoom-out;
71}
72
73main {
74 display: flex;
75 flex-direction: column;
76 align-items: center;
77}
78
79.header a,
80.sub-title a,
81.info-container a,
82.comment-info-container a,
83.sort-opts a,
84.view-opts a,
85.more a
86{
87 text-decoration: none;
88}
89
90a {
91 color: var(--link-color);
92}
93
94a:hover {
95 color: var(--link-color);
96 text-decoration: underline;
97}
98
99a:visited {
100 color: var(--link-visited-color);
101}
102
103.header {
104 display: flex;
105 flex-direction: row;
106 justify-content: center;
107}
108
109.sub-title {
110 display: flex;
111}
112
113#button-container {
114 margin-left: 10px;
115 display: flex;
116 align-items: center;
117}
118
119.sorting,
120.viewing {
121 margin-top: 20px;
122}
123
124.sort-opts,
125.view-opts {
126 display: grid;
127 margin: 10px;
128}
129
130.sort-opts,
131.view-opts {
132 grid-template-columns: repeat(2, 1fr);
133 grid-template-rows: repeat(5, 1fr);
134 grid-auto-flow: column;
135}
136
137.view-opts {
138 grid-template-rows: repeat(2, 1fr);
139}
140
141.footer {
142 display: flex;
143 flex-direction: row;
144}
145
146.footer-item {
147 margin-left: auto;
148}
149
150nav {
151 display: flex;
152 align-items: stretch;
153}
154
155.post {
156 margin-bottom: 5px;
157}
158
159.post, .comments-container, .hero, .header, .footer {
160 padding: 0.3rem;
161 flex: 1 1 95%;
162 width: 100%;
163}
164
165.post, .hero {
166 font-size: 0.9rem;
167}
168
169.post-container.card {
170 border: 1px solid var(--bg-color-muted);
171 border-radius: var(--border-radius-card);
172 display: block;
173}
174
175.post-text.card {
176 padding: 0.9rem;
177 padding-top: 0.5rem;
178 padding-bottom: 0.5rem;
179 overflow-wrap: break-word;
180 max-width: 95%;
181}
182
183.self-text-overflow.card {
184 /* For spoiler positioning */
185 position: relative;
186 padding-top: 0.3rem;
187 max-height: 10vh;
188 overflow: hidden;
189 overflow-wrap: break-word;
190 display: block;
191 max-width: 98%;
192}
193
194.self-text.card {
195 overflow: hidden;
196 display: -webkit-box;
197 /* Safari on iOS <= 17 */
198 -webkit-box-orient: vertical;
199 -webkit-line-clamp: 3;
200 line-clamp: 3;
201 text-overflow: ellipsis;
202}
203
204.image-viewer {
205 position: relative;
206}
207
208.image-viewer > img {
209 cursor: pointer;
210}
211
212.spoiler {
213 background-color: rbga(var(--bg-color-muted), 0.2);
214 /* Safari on iOS <= 17 */
215 -webkit-backdrop-filter: blur(3rem);
216 backdrop-filter: blur(3rem);
217 border-radius: var(--border-radius-preview);
218
219 position: absolute;
220 top: 0;
221 left: 0;
222
223 box-sizing: border-box;
224 display: flex;
225 height: 100%;
226 width: 100%;
227
228 justify-content: center;
229 align-items: center;
230
231 cursor: pointer;
232
233 z-index: 10;
234}
235
236.gallery-item-idx,
237.spoiler > h2 {
238 text-shadow: 0.1rem 0.1rem 1rem var(--bg-color-muted);
239}
240
241.comments-container {
242 font-size: 0.9rem;
243}
244
245.info-container a,
246.info-container,
247.comment-info-container,
248.more,
249summary::before
250{
251 color: var(--text-color-muted)
252}
253
254.info-container, .more {
255 font-size: 0.8rem;
256 display: flex;
257}
258
259summary::before {
260 font-size: 0.7rem;
261}
262
263.comment-info-container {
264 display: inline-flex;
265 align-items: center;
266 font-size: 0.8rem;
267}
268
269.domain {
270 color: var(--text-color-muted);
271 font-size: 0.8rem;
272}
273
274.info-item, .header-item, .footer-item {
275 margin-right: 14px;
276}
277
278.media-preview img,
279.media-preview video {
280 object-fit: cover;
281 width: 4rem;
282 height: 4rem;
283 border-radius: var(--border-radius-preview);
284}
285
286.image-viewer img,
287.image-viewer video {
288 border-radius: var(--border-radius-media);
289
290 max-height: 50vh;
291 max-width: 95%;
292
293 display: block;
294 width: unset;
295 height: unset;
296 margin-left: auto;
297 margin-right: auto;
298 margin-bottom: 0.5rem;
299
300 object-fit: fill;
301}
302
303video:-webkit-full-screen {
304 width: 100%;
305 height: 100%;
306 object-fit: contain;
307}
308
309video:fullscreen {
310 width: 100%;
311 height: 100%;
312 object-fit: contain;
313}
314
315.image-viewer.main-content img,
316.image-viewer.main-content video {
317 max-height: 70vh;
318}
319
320.image-viewer a:has(img) {
321 font-size: 0rem;
322 padding: unset;
323 margin: unset;
324}
325
326.media-maximized {
327 max-width: 100vw;
328 max-height: 100vh;
329 width: auto;
330 height: auto;
331 display: block;
332 margin: auto;
333 object-fit: contain;
334}
335
336.media-maximized.container {
337 display: flex;
338 justify-content: center;
339 align-items: center;
340 width: 100vw;
341 height: 100vh;
342 overflow: hidden;
343}
344
345.post-author {
346 display: none
347}
348
349.post-media {
350 display: block;
351 margin: 0 auto;
352 width: 95%;
353 padding: 5px;
354}
355
356form {
357 display: flex;
358 flex-direction: column;
359 align-items: center;
360 width: 90%;
361}
362
363@media (min-width: 768px) {
364 :root {
365 --border-radius-card: 0.5vmin;
366 --border-radius-media: 0.5vmin;
367 --border-radius-preview: 0.3vmin;
368 }
369 .post, .comments-container, .hero, .header, .footer {
370 flex: 1 1 90%;
371 width: 90%;
372 }
373 .media-preview img,
374 .media-preview video
375 {
376 width: 5rem;
377 height: 5rem;
378 }
379 .image-viewer img,
380 .image-viewer video
381 {
382 max-height: 50vh;
383 }
384 .post-text.card {
385 max-width: 100%;
386 }
387 .self-text-overflow.card {
388 max-width: 100%;
389 }
390 .post-author {
391 display: inline
392 }
393 .post-media {
394 width: 50%;
395 }
396 form {
397 width: 40%;
398 }
399 .sort-opts,
400 .view-opts {
401 grid-template-columns: repeat(9, 1fr);
402 grid-template-rows: repeat(1, 1fr);
403 grid-auto-flow: row;
404 }
405}
406
407@media (min-width: 1080px) {
408 :root {
409 --border-radius-card: 0.5vmin;
410 --border-radius-media: 0.5vmin;
411 --border-radius-preview: 0.3vmin;
412 }
413 .post, .comments-container, .hero, .header, .footer {
414 flex: 1 1 60%;
415 width: 60%;
416 }
417 .media-preview img,
418 .media-preview video
419 {
420 width: 5rem;
421 height: 5rem;
422 }
423 .image-viewer img,
424 .image-viewer video
425 {
426 max-height: 45vh;
427 }
428 .media-preview a {
429 font-size: 2rem;
430 padding: 2rem;
431 }
432 .self-text.card {
433 -webkit-line-clamp: 4;
434 line-clamp: 4;
435 }
436 .post-author {
437 display: inline
438 }
439 .post-media {
440 width: 50%;
441 }
442 form {
443 width: 20%;
444 }
445 .sort-opts,
446 .view-opts {
447 grid-template-columns: repeat(9, 1fr);
448 grid-template-rows: repeat(1, 1fr);
449 grid-auto-flow: row;
450 }
451}
452
453@media (min-width: 2560px) {
454 .post, .comments-container, .hero, .header, .footer {
455 flex: 1 1 40%;
456 width: 40%;
457 }
458 .image-viewer img,
459 .image-viewer video
460 {
461 max-height: 30vh;
462 }
463 .sort-opts,
464 .view-opts {
465 grid-template-columns: repeat(9, 1fr);
466 grid-template-rows: repeat(1, 1fr);
467 grid-auto-flow: row;
468 }
469}
470
471.comment, .more {
472 width: 100%;
473 border-left: 1px dashed var(--text-color-muted);
474 padding: 8px 0px 0px 18px;
475 box-sizing: border-box;
476}
477
478.comment {
479 padding-top: 10px;
480}
481
482.first {
483 border-left: none;
484 padding-left: 0;
485 margin-top: 10px;
486}
487
488.post-info {
489 display: flex;
490 flex-direction: row;
491 align-items: center;
492}
493
494.post-container:target {
495 outline: 4px solid var(--bg-color-muted);
496 background: var(--bg-color-muted);
497 border-radius: 2px;
498 padding: 5px;
499}
500
501.post-text {
502 display: flex;
503 flex-direction: column;
504 align-items: stretch;
505 justify-content: space-evenly;
506}
507
508.media-preview {
509 padding-left: 10px;
510 margin-left: auto;
511}
512
513.bottom-links-container {
514 display: flex;
515 flex-direction: row;
516}
517
518.title-container, .comment-info-container, summary.expand-comments::before {
519 margin-top: 5px;
520 margin-bottom: 5px;
521}
522
523.info-container {
524 flex: 1;
525}
526
527.title-container > a {
528 color: var(--text-color);
529 text-decoration: none;
530}
531
532.title-container.card > a {
533 font-size: 1.125rem;
534 font-weight: bold;
535}
536
537.title-container > a:hover {
538 text-decoration: underline;
539}
540
541.title-container > a:visited {
542 color: var(--text-color-muted)
543}
544
545.header a,
546.sort-opts a,
547.view-opts a,
548.sub-title a {
549 color: var(--text-color);
550}
551
552.more a {
553 color: var(--text-color-muted);
554}
555
556hr {
557 border: none;
558 border-top: 1px dashed var(--text-color-muted);
559 height: 0;
560}
561
562blockquote {
563 margin: 0px;
564 padding-left: 10px;
565 border-left: 2px solid var(--blockquote-color);
566 color: var(--blockquote-color);
567}
568
569pre, code {
570 background: var(--bg-color-muted);
571}
572
573pre {
574 padding: 10px 0px 10px 10px;
575 width: 100%;
576 overflow: auto;
577}
578
579code {
580 overflow-x: auto;
581}
582
583p {
584 margin-top: 5px;
585 margin-bottom: 0px;
586}
587
588.self-text p {
589 margin-top: 10px;
590 margin-bottom: 10px;
591}
592
593.comment-body {
594 text-align: left;
595 display: block;
596 padding-bottom: 8px;
597}
598
599.comment-body img {
600 height: auto;
601 max-width: 300px;
602}
603
604summary.expand-post {
605 display: none;
606}
607
608summary {
609 list-style: none;
610 cursor: pointer;
611}
612
613summary::-webkit-details-marker {
614 display: none;
615}
616
617details[open] summary::before {
618 content: "";
619 padding-right: 10px;
620}
621
622details:not([open]) summary::before {
623 content: "";
624 padding-right: 10px;
625}
626
627.footer {
628 padding-bottom: 40px;
629}
630
631a {
632 white-space: normal;
633 word-wrap: break-word;
634 overflow-wrap: break-word;
635}
636
637.gallery {
638 display: flex;
639 overflow-x: auto;
640 position: relative;
641 padding: 5px;
642 align-items: center;
643 scroll-snap-type: both mandatory;
644}
645
646.gallery-item {
647 flex: 0 0 auto;
648 margin-right: 10px;
649 max-width: 100%;
650 width: 100%;
651 scroll-snap-align: center;
652}
653
654.gallery-item-idx {
655 text-align: center;
656}
657
658.post-title {
659 margin-top: 5px;
660}
661
662.op {
663 color: var(--accent);
664}
665
666.gilded {
667 color: var(--gilded);
668}
669
670button {
671 border: 0px solid;
672 border-radius: 2px;
673 background-color: var(--bg-color-muted);
674 color: var(--text-color);
675 padding: 5px;
676}
677
678input[type="text"],
679input[type="password"],
680input[type="email"],
681textarea {
682 width: 100%;
683 padding: 10px;
684 margin: 10px 0;
685 box-sizing: border-box;
686 border: 1px solid var(--bg-color-muted);
687 border-radius: 4px;
688 background-color: var(--bg-color-muted);
689 color: var(--text-color);
690}
691
692form label {
693 width: 100%;
694 flex-basis: 100%;
695 margin: 5px 0;
696 color: var(--text-color);
697}
698
699form input[type="submit"] {
700 width: 100%;
701 padding: 10px 20px;
702 margin-top: 20px;
703 background-color: var(--link-color);
704 color: var(--bg-color);
705 border: none;
706 border-radius: 4px;
707 cursor: pointer;
708}
709
710form input[type="submit"]:hover {
711 background-color: var(--link-color);
712 opacity: 0.8;
713}
714
715.input-text {
716 width: 100%;
717}
718
719.submit-button {
720 margin: 24px 0;
721 width: 100%;
722 display: flex;
723 flex-direction: row;
724 justify-content: center;
725}
726
727.submit-button button {
728 width: 100%;
729 padding: 12px;
730 background-color: var(--accent);
731 color: var(--bg-color);
732}
733
734.submit-button button:disabled {
735 width: 100%;
736 padding: 12px;
737 background-color: var(--bg-color-muted);
738 color: var(--text-color-muted);
739}
740
741.register-error-message,
742.dashboard-error-message {
743 margin-bottom: 1rem;
744 flex-flow: row wrap;
745 color: var(--error-text-color);
746}
747
748.register-message {
749 margin-bottom: 1rem;
750 flex-flow: row wrap;
751}
752
753.invite-table {
754 width: 100%;
755 padding: 10px 0;
756}
757
758.invite-table th,
759.invite-table td
760{
761 padding: 5px 0;
762}
763
764.invite-table-header {
765 text-align: left;
766}
767
768.invite-link {
769 font-family: monospace;
770}
771
772.search-bar {
773 display: flex;
774 flex-direction: row;
775 justify-content: space-evenly;
776 width: 100%;
777 gap: 10px;
778}
779
780.search-input {
781 flex: 9;
782}
783
784.search-button {
785 flex: 1;
786 padding: 10px;
787}
788
789.search-results {
790 display: flex;
791 flex-direction: column;
792 gap: 20px;
793}
794
795.about {
796 padding-bottom: 20px;
797}
798
799a.nav-link {
800 color: var(--text-color-muted);
801}
802
803.comment-info-container > p {
804 margin-top: 0px;
805}
806
807select {
808 -webkit-appearance: none;
809 -moz-appearance: none;
810 text-indent: 1px;
811 text-overflow: '';
812}
813
814.sticky {
815 background-color: var(--sticky-color);
816 border-radius: var(--border-radius-card);
817 border: 4px solid var(--sticky-color);
818}
819
820.inline {
821 max-width: 100%;
822}