alice.mosphere.at
this repo has no description
1@import url('@szhsin/react-menu/dist/core.css');
2@import url('toastify-js/src/toastify.css');
3
4html,
5body {
6 margin: 0;
7 padding: 0;
8 background-color: var(--bg-color);
9 color: var(--text-color);
10 overflow-x: hidden;
11}
12body {
13 touch-action: pan-x pan-y;
14}
15
16#app {
17 min-height: 100vh;
18 min-height: 100dvh;
19 display: flex;
20 align-items: center;
21 justify-content: center;
22}
23#app-standalone {
24 background-color: var(--bg-faded-color);
25}
26
27/* MENTIONS */
28
29a.mention {
30 text-decoration-line: none;
31}
32a.mention span {
33 text-decoration-line: underline;
34 text-decoration-color: inherit;
35 text-decoration-thickness: 2px;
36 text-underline-offset: 2px;
37}
38/* a.mention:has(span).hashtag {
39 color: var(--link-light-color);
40} */
41a.mention span {
42 color: var(--text-color);
43}
44a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
45 color: var(--link-visited-color);
46 text-decoration-color: var(--link-visited-color);
47}
48
49.deck-container {
50 width: 100%;
51 height: 100vh;
52 height: 100dvh;
53 overflow: auto;
54 overflow-x: hidden;
55 transition: opacity 0.1s ease-in-out;
56 overscroll-behavior: contain;
57 scroll-behavior: smooth;
58 background-color: var(--bg-color);
59 flex-grow: 1;
60 /* This `transform` fixes carousel blocking vertical scrolling for pointer devices on iPad */
61 transform: translateZ(0);
62}
63
64@media (hover: hover) {
65 .deck-container {
66 overscroll-behavior: auto;
67 }
68}
69.deck-container[hidden] {
70 display: block;
71 position: absolute;
72 user-select: none;
73 pointer-events: none;
74 opacity: 0;
75 content-visibility: hidden;
76}
77
78.deck-container,
79.deck.contained {
80 scroll-padding-top: 3em;
81}
82
83:is(#home-page, #welcome, #columns, #loader-root) ~ .deck-container {
84 z-index: 10;
85 position: fixed;
86 inset: 0;
87}
88:is(#home-page, #welcome, #columns, #loader-root):has(~ .deck-container) {
89 /* display: block; */
90 position: absolute;
91 user-select: none;
92 pointer-events: none;
93 opacity: 0;
94 /* This causes scrollTop to be reset to 0 when the page is hidden */
95 /* content-visibility: hidden; */
96}
97
98.deck {
99 min-height: 100vh;
100 min-height: 100dvh;
101 margin: auto;
102 width: var(--main-width);
103 max-width: 100%;
104 background-color: var(--bg-color);
105 overflow-anchor: auto;
106}
107.deck.contained {
108 overflow: auto;
109 overflow-x: hidden;
110 height: 100vh;
111 height: 100dvh;
112 overscroll-behavior: contain;
113}
114@media (hover: hover) {
115 .deck.contained {
116 overscroll-behavior: auto;
117 }
118}
119
120.deck > header {
121 position: sticky;
122 top: 0;
123 z-index: 1;
124 cursor: default;
125 z-index: 10;
126 user-select: none;
127 transition: transform 0.5s ease-in-out;
128 user-select: none;
129
130 .header-double-lines {
131 font-size: 90% !important;
132 cursor: pointer;
133
134 div {
135 font-weight: normal;
136 color: var(--text-insignificant-color);
137 }
138 }
139}
140.deck > header[hidden] {
141 display: block;
142 transform: translateY(-100%);
143 pointer-events: none;
144 user-select: none;
145}
146.deck > header .header-grid {
147 background-color: var(--bg-color);
148 /* background-color: var(--bg-blur-color);
149 background-image: linear-gradient(to bottom, var(--bg-color), transparent);
150 backdrop-filter: saturate(180%) blur(20px); */
151 border-bottom: var(--hairline-width) solid var(--divider-color);
152 min-height: 3em;
153 display: grid;
154 grid-template-columns: 1fr minmax(0, max-content) 1fr;
155 align-items: center;
156 white-space: nowrap;
157}
158.deck > header .header-grid > .header-side:last-of-type {
159 text-align: right;
160 grid-column: 3;
161}
162.deck > header .header-grid :is(button, .button).plain {
163 backdrop-filter: none;
164}
165.deck > header .header-grid h1 {
166 margin: 0 8px;
167 padding: 0;
168 font-size: 1.2em;
169 text-align: center;
170 overflow: hidden;
171 text-overflow: ellipsis;
172 white-space: nowrap;
173}
174.deck > header .header-grid.header-grid-2 {
175 grid-template-columns: 1fr max-content;
176}
177.deck > header .header-grid-2 h1 {
178 text-align: left;
179 padding-left: 8px;
180}
181.deck > header .header-grid h1:has(.ancestors-indicator) {
182 display: flex;
183 gap: 8px;
184 align-items: center;
185 max-width: fit-content;
186}
187.deck > header .header-grid h1:has(.ancestors-indicator) .hero-heading {
188 flex: 1;
189 overflow: hidden;
190 text-overflow: ellipsis;
191 white-space: nowrap;
192}
193.deck h2 {
194 font-size: 1.45em;
195}
196.deck.padded-bottom .timeline > li:last-child {
197 padding-bottom: 80vh !important;
198 padding-bottom: 80dvh !important;
199}
200
201@keyframes indeterminate-bar {
202 0% {
203 transform: translateX(-50%);
204 opacity: 0.25;
205 }
206 50% {
207 opacity: 1;
208 }
209 100% {
210 transform: translateX(50%);
211 opacity: 0.25;
212 }
213}
214.deck > header.loading:after {
215 pointer-events: none;
216 content: '';
217 display: block;
218 height: 4px;
219 position: absolute;
220 bottom: 0;
221 width: 50%;
222 left: 25%;
223 background-image: radial-gradient(
224 farthest-side at bottom,
225 var(--link-color),
226 transparent
227 );
228 animation: indeterminate-bar 1s ease-in-out infinite alternate;
229}
230@media (min-width: 40em) {
231 .deck > header.loading:after {
232 height: 8px;
233 }
234}
235
236.timeline {
237 margin: 0 auto;
238 padding: 0;
239
240 &.timeline-media {
241 --grid-gap: 8px;
242 display: grid;
243 grid-template-columns: 1fr;
244 grid-auto-rows: fit-content;
245 gap: var(--grid-gap);
246 padding: var(--grid-gap);
247
248 &:not(#columns &) {
249 background-color: var(--bg-faded-color);
250 }
251
252 @media (min-width: 320px) {
253 grid-template-columns: 1fr 1fr;
254 }
255
256 @media (min-width: 40em) {
257 &:not(#columns &) {
258 --grid-gap: 16px;
259 grid-template-columns: 1fr 1fr 1fr;
260
261 @media (min-width: 40em) {
262 width: 95vw;
263 max-width: calc(320px * 3.3);
264 transform: translateX(calc(-50% + var(--main-width) / 2));
265 }
266 }
267
268 #columns & {
269 padding-inline: 0;
270 }
271 }
272
273 li {
274 padding: 0 !important;
275 margin: 0 !important;
276 border: 0 !important;
277 overflow: visible !important;
278 background-color: transparent !important;
279 box-shadow: none !important;
280 }
281
282 @supports (grid-template-rows: masonry) {
283 grid-template-rows: masonry;
284 masonry-auto-flow: pack;
285
286 .media-post a {
287 aspect-ratio: revert !important;
288
289 video,
290 img,
291 audio {
292 min-height: 88px; /* for extreme dimensions */
293 }
294 }
295 }
296 }
297}
298.timeline.grow {
299 /* min-height: 100vh;
300 min-height: 100dvh; */
301 padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
302}
303.timeline > li {
304 list-style: none;
305 margin: 0;
306 padding: 0;
307 border-bottom: var(--hairline-width) solid var(--divider-color);
308}
309.timeline.flat > li {
310 border-bottom: none;
311}
312
313.timeline.contextual {
314 --thread-start: 40px;
315 --line-start: 40px;
316 --line-width: 3px;
317 --line-end: calc(var(--line-start) + var(--line-width));
318 --line-margin-end: 16px;
319 --line-radius: 10px;
320 --line-diameter: calc(var(--line-radius) * 2);
321 --avatar-size: 50px;
322 --avatar-margin-start: 16px;
323 --avatar-margin-end: 12px;
324}
325.timeline.contextual > li {
326 background-image: linear-gradient(
327 to right,
328 transparent,
329 transparent var(--line-start),
330 var(--comment-line-color) var(--line-start),
331 var(--comment-line-color) var(--line-end),
332 transparent var(--line-end),
333 transparent
334 );
335 background-repeat: no-repeat;
336 transition: opacity 0.3s ease-in-out;
337}
338.timeline.contextual > li:first-child {
339 background-position: 0 calc(16px + var(--avatar-size));
340}
341.timeline.contextual > li:last-child {
342 background-size: 100% 20px;
343}
344.timeline.contextual > li:only-child {
345 background-image: none;
346}
347.timeline.contextual > li.descendant {
348 position: relative;
349}
350.timeline.contextual > li.descendant {
351 padding-bottom: 1em;
352}
353.timeline.contextual
354 > li.descendant:not(.thread)
355 > :is(.status-link, .status-focus) {
356 padding-left: 40px;
357}
358.timeline.contextual .replies[data-scroll-left]:not([data-scroll-left='0']) {
359 background-color: var(--bg-color);
360 box-shadow: inset 0 -3px var(--comment-line-color),
361 inset 0 3px var(--comment-line-color);
362 overscroll-behavior-x: contain;
363 /* touch-action: pan-x; */
364}
365.timeline.contextual .replies[data-comments-level='4'] {
366 overflow-x: auto;
367}
368.timeline.contextual .replies[data-comments-level='4']:has(.replies) {
369 overflow-x: auto;
370 mask-image: linear-gradient(to left, transparent, black 32px);
371}
372.timeline.contextual
373 .replies[data-comments-level='4']:has(.replies)
374 > .replies-summary {
375 border-top: 2px dashed var(--divider-color);
376}
377.timeline.contextual
378 .replies[data-comments-level='4']
379 .replies[data-comments-level-overflow='true']
380 .status {
381 min-width: min(20em, 80vw);
382}
383.timeline.contextual
384 > li.descendant.thread
385 > :is(.status-link, .status-focus)
386 + .replies
387 .replies-summary {
388 margin-left: calc(
389 var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
390 (var(--line-margin-end) * (var(--comments-level) - 1))
391 );
392}
393/* .timeline.contextual
394 > li.descendant.thread
395 > .status-link
396 + .replies
397 .replies
398 > .replies-summary {
399 margin-left: calc(
400 var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
401 var(--line-margin-end)
402 );
403}
404.timeline.contextual
405 > li.descendant.thread
406 > .status-link
407 + .replies
408 .replies
409 .replies
410 > .replies-summary {
411 margin-left: calc(
412 var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
413 (var(--line-margin-end) * 2)
414 );
415} */
416.timeline.contextual
417 > li.descendant.thread
418 > :is(.status-link, .status-focus)
419 + .replies
420 :is(.status-link, .status-focus) {
421 padding-left: calc(
422 var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
423 (var(--line-margin-end) * (var(--comments-level) - 1))
424 );
425}
426/* .timeline.contextual
427 > li.descendant.thread
428 > .status-link
429 + .replies
430 .replies
431 .status-link {
432 padding-left: calc(
433 var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
434 var(--line-margin-end)
435 );
436}
437.timeline.contextual
438 > li.descendant.thread
439 > .status-link
440 + .replies
441 .replies
442 .replies
443 .status-link {
444 padding-left: calc(
445 var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
446 (var(--line-margin-end) * 2)
447 );
448} */
449.timeline.contextual
450 > li.descendant:not(.thread)
451 > :is(.status-link, .status-focus)
452 + .replies
453 .replies-summary {
454 margin-left: calc(
455 var(--thread-start) + var(--line-margin-end) * var(--comments-level)
456 );
457}
458/* .timeline.contextual
459 > li.descendant:not(.thread)
460 > .status-link
461 + .replies
462 .replies
463 > .replies-summary {
464 margin-left: calc(
465 var(--thread-start) + var(--line-margin-end) + var(--line-margin-end)
466 );
467}
468.timeline.contextual
469 > li.descendant:not(.thread)
470 > .status-link
471 + .replies
472 .replies
473 .replies
474 > .replies-summary {
475 margin-left: calc(
476 var(--thread-start) + var(--line-margin-end) + (var(--line-margin-end) * 2)
477 );
478} */
479.timeline.contextual
480 > li.descendant:not(.thread)
481 > :is(.status-link, .status-focus)
482 + .replies
483 :is(.status-link, .status-focus) {
484 padding-left: calc(
485 var(--thread-start) + var(--line-margin-end) * var(--comments-level)
486 );
487}
488/* .timeline.contextual
489 > li.descendant:not(.thread)
490 > .status-link
491 + .replies
492 .replies
493 .status-link {
494 padding-left: calc(var(--thread-start) + (var(--line-margin-end) * 2));
495}
496.timeline.contextual
497 > li.descendant:not(.thread)
498 > .status-link
499 + .replies
500 .replies
501 .replies
502 .status-link {
503 padding-left: calc(var(--thread-start) + (var(--line-margin-end) * 3));
504} */
505.timeline.contextual > li.descendant:not(.thread):before {
506 content: '';
507 position: absolute;
508 top: 10px;
509 left: var(--line-start);
510 width: var(--line-diameter);
511 height: var(--line-diameter);
512 border-radius: var(--line-radius);
513 border-style: solid;
514 border-width: var(--line-width);
515 border-color: transparent transparent var(--comment-line-color) transparent;
516 transform: rotate(45deg);
517}
518.timeline.contextual > li .replies-link {
519 color: var(--text-insignificant-color);
520 margin-left: 16px;
521 margin-top: -12px;
522 padding-bottom: 12px;
523 font-size: 90%;
524}
525.timeline.contextual > li.ancestor .replies-link {
526 margin-left: calc(
527 var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end)
528 );
529}
530.timeline.contextual
531 > li.thread
532 > :is(.status-link, .status-focus)
533 .replies-link {
534 margin-left: calc(
535 var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end)
536 );
537}
538.timeline.contextual > li .replies-link * {
539 vertical-align: middle;
540}
541.timeline.contextual > li .replies {
542 margin-top: -12px;
543}
544.timeline.contextual > li .replies :is(ul, li):not(.content *) {
545 margin: 0;
546 padding: 0;
547 list-style: none;
548}
549.timeline.contextual > li .replies > .replies-summary {
550 padding: 8px;
551 background-color: var(--bg-faded-color);
552 display: inline-block;
553 border-radius: 8px;
554 cursor: pointer;
555 text-transform: uppercase;
556 font-size: 12px;
557 color: var(--text-insignificant-color);
558 user-select: none;
559 box-shadow: 0 0 0 2px var(--bg-color);
560 position: relative;
561 list-style: none;
562 white-space: nowrap;
563
564 b {
565 font-weight: 500;
566 color: var(--text-color);
567 }
568}
569.timeline.contextual > li .replies > .replies-summary::-webkit-details-marker {
570 display: none;
571}
572.timeline.contextual > li .replies > .replies-summary > * {
573 vertical-align: middle;
574}
575.timeline.contextual > li .replies > .replies-summary .avatars {
576 margin-right: 8px;
577
578 > *:not(:first-child) {
579 margin: 0 0 0 -4px;
580 }
581}
582.timeline.contextual > li .replies > .replies-summary:active,
583.timeline.contextual > li .replies[open] > .replies-summary {
584 color: var(--text-color);
585 background-color: var(--comment-line-color);
586 background-image: linear-gradient(
587 to top right,
588 var(--comment-line-color),
589 var(--bg-faded-color)
590 );
591}
592.timeline.contextual > li .replies[open] > .replies-summary {
593 border-bottom-left-radius: 0;
594}
595.timeline.contextual > li .replies .replies-summary[hidden] {
596 display: none;
597}
598.timeline.contextual > li .replies li:not(.content li) {
599 position: relative;
600}
601.timeline.contextual > li .replies li:not(.content li) {
602 --line-start: calc(
603 var(--thread-start) + var(--line-margin-end) * var(--comments-level)
604 );
605 --line-end: calc(var(--line-start) + var(--line-width));
606 background-image: linear-gradient(
607 to right,
608 transparent,
609 transparent var(--line-start),
610 var(--comment-line-color) var(--line-start),
611 var(--comment-line-color) var(--line-end),
612 transparent var(--line-end),
613 transparent
614 );
615 background-repeat: no-repeat;
616}
617/* .timeline.contextual > li .replies .replies li {
618 --line-start: calc(var(--thread-start) + (var(--line-margin-end) * 2));
619}
620.timeline.contextual > li .replies .replies .replies li {
621 --line-start: calc(var(--thread-start) + (var(--line-margin-end) * 3));
622} */
623.timeline.contextual > li.thread .replies li:not(.content li) {
624 --line-start: calc(
625 var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
626 (var(--line-margin-end) * (var(--comments-level) - 1))
627 );
628}
629/* .timeline.contextual > li.thread .replies .replies li {
630 --line-start: calc(
631 var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
632 var(--line-margin-end)
633 );
634}
635.timeline.contextual > li.thread .replies .replies .replies li {
636 --line-start: calc(
637 var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
638 (var(--line-margin-end) * 2)
639 );
640} */
641.timeline.contextual > li .replies li:not(.content li):last-child {
642 background-size: 100% 20px;
643}
644.timeline.contextual > li .replies li:not(.content li):before {
645 content: '';
646 position: absolute;
647 top: 10px;
648 left: var(--line-start);
649 width: var(--line-diameter);
650 height: var(--line-diameter);
651 border-radius: var(--line-radius);
652 border-style: solid;
653 border-width: var(--line-width);
654 border-color: transparent transparent var(--comment-line-color) transparent;
655 transform: rotate(45deg);
656}
657/* .timeline.contextual > li .replies .replies li:before {
658 --line-start: calc(
659 var(--thread-start) + var(--line-margin-end) + var(--line-margin-end)
660 );
661}
662.timeline.contextual > li .replies .replies .replies li:before {
663 --line-start: calc(
664 var(--thread-start) + var(--line-margin-end) + (var(--line-margin-end) * 2)
665 );
666} */
667.timeline.contextual > li.thread .replies li:not(.content li):before {
668 --line-start: calc(
669 var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
670 (var(--line-margin-end) * (var(--comments-level) - 1))
671 );
672}
673/* .timeline.contextual > li.thread .replies .replies li:before {
674 --line-start: calc(
675 var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
676 var(--line-margin-end)
677 );
678}
679.timeline.contextual > li.thread .replies .replies .replies li:before {
680 --line-start: calc(
681 var(--avatar-size) + var(--avatar-margin-start) + var(--avatar-margin-end) +
682 (var(--line-margin-end) * 2)
683 );
684} */
685.timeline.contextual.loading > li:not(.hero) {
686 /* opacity: 0.5; */
687 pointer-events: none;
688}
689
690.timeline.contextual > li .replies {
691 > ul > li:only-child {
692 > .replies {
693 > ul > li:only-child {
694 margin-left: calc(-1 * var(--line-margin-end));
695 background-position: calc(16px) 0;
696 background-size: 100% calc(20px + 8px);
697
698 &:before {
699 display: none;
700 }
701 }
702 }
703 }
704}
705
706.timeline-deck.compact .status {
707 max-height: max(25vh, 160px);
708 overflow: hidden;
709 mask-image: linear-gradient(
710 rgba(0, 0, 0, 1),
711 rgba(0, 0, 0, 1) 80%,
712 transparent 95%
713 );
714}
715.timeline-deck.compact .status .meta ~ * {
716 pointer-events: none;
717}
718
719.timeline-header {
720 padding: 0 16px;
721 opacity: 0.75;
722}
723
724.timeline-empty {
725 color: var(--text-insignificant-color);
726 padding: 0 16px;
727 margin-bottom: 3em;
728}
729
730.timeline:not(.flat) > li.timeline-item-container {
731 --avatar-size: 50px;
732 --line-start: 40px;
733 --line-width: 3px;
734 --line-end: calc(var(--line-start) + var(--line-width));
735 background-image: linear-gradient(
736 to right,
737 transparent,
738 transparent var(--line-start),
739 var(--comment-line-color) var(--line-start),
740 var(--comment-line-color) var(--line-end),
741 transparent var(--line-end),
742 transparent
743 );
744 background-repeat: no-repeat;
745}
746.timeline:not(.flat) > li.timeline-item-container-start {
747 margin-bottom: 0;
748 border-bottom-left-radius: 0;
749 border-bottom-right-radius: 0;
750 border-bottom: 0;
751 background-position: 0 calc(16px + var(--avatar-size));
752}
753.timeline:not(.flat) > li.timeline-item-container-middle {
754 margin-top: 0;
755 margin-bottom: 0;
756 border-radius: 0;
757 border-bottom: 0;
758 border-top: 0;
759}
760.timeline:not(.flat) > li.timeline-item-container-end {
761 margin-top: 0;
762 border-top-left-radius: 0;
763 border-top-right-radius: 0;
764 border-top: 0;
765 background-size: 100% 16px;
766}
767.timeline:not(.flat)
768 > li:is(.timeline-item-container-middle, .timeline-item-container-end)
769 .status-reply-to:not(.visibility-direct):not(.status-card) {
770 background-image: none;
771}
772.timeline:not(.flat)
773 > li.timeline-item-diff-author
774 > :is(.status-link, .status-focus)
775 > .status
776 > a
777 > .avatar {
778 transform: scale(0.8);
779 filter: drop-shadow(0 0 16px var(--bg-color))
780 drop-shadow(0 0 8px var(--bg-color)) drop-shadow(0 0 8px var(--bg-color));
781}
782
783.timeline .show-more {
784 padding-left: calc(var(--line-end) + var(--line-margin-end)) !important;
785 text-align: left;
786 background-color: transparent !important;
787 backdrop-filter: none !important;
788 position: relative;
789 border-radius: 0;
790 padding-block: 16px !important;
791
792 .avatars-bunch > .avatar:not(:first-child) {
793 margin-left: -4px;
794 }
795}
796.timeline .show-more:hover {
797 filter: none !important;
798 color: var(--text-color) !important;
799 background-color: var(--bg-faded-blur-color) !important;
800}
801.timeline .show-more:before {
802 content: '';
803 position: absolute;
804 top: 10px;
805 left: var(--line-start);
806 width: var(--line-diameter);
807 height: var(--line-diameter);
808 border-radius: var(--line-radius);
809 border-style: solid;
810 border-width: var(--line-width);
811 border-color: transparent transparent var(--comment-line-color) transparent;
812 transform: rotate(45deg);
813}
814
815.status-loading {
816 text-align: center;
817 color: var(--text-insignificant-color);
818 max-width: var(--main-width);
819}
820.status-error {
821 text-align: center;
822 color: var(--text-insignificant-color);
823 max-width: var(--main-width);
824}
825
826.status-link {
827 display: block;
828 text-decoration-line: none;
829 color: inherit;
830 user-select: none;
831 transition: background-color 0.2s ease-out;
832 -webkit-tap-highlight-color: transparent;
833 animation: appear 0.2s ease-out;
834 -webkit-touch-callout: none;
835}
836@media (pointer: coarse) {
837 .status-focus:not(.hero .status-focus) {
838 /* Only the hero doesn't have context menu */
839 user-select: none;
840 -webkit-tap-highlight-color: transparent;
841 -webkit-touch-callout: none;
842 }
843}
844:is(.status-link, .status-focus):is(:focus, .is-active) {
845 background-color: var(--link-bg-hover-color);
846 outline-offset: -2px;
847}
848@media (hover: hover) {
849 .status-link:hover {
850 background-color: var(--link-bg-hover-color);
851 outline-offset: -2px;
852 }
853}
854.status-link:active:not(:has(:is(.media, button):active)) {
855 filter: brightness(0.95);
856}
857
858.status-carousel {
859 --carousel-faded-color: var(--bg-faded-color);
860 background: linear-gradient(
861 to bottom right,
862 var(--carousel-faded-color),
863 transparent 150%
864 );
865 position: relative;
866 container-type: inline-size;
867}
868.status-carousel:after {
869 content: '';
870 position: absolute;
871 inset: 0;
872 pointer-events: none;
873 background-image: radial-gradient(
874 ellipse 50% 32px at bottom center,
875 var(--carousel-faded-color),
876 transparent
877 ),
878 linear-gradient(to top, var(--bg-color), transparent 64px);
879 background-repeat: no-repeat;
880 background-position: bottom center;
881}
882.status-carousel header {
883 padding: 8px 16px 0;
884 display: flex;
885 justify-content: space-between;
886 align-items: center;
887}
888.status-carousel h3 {
889 margin: 0;
890 padding: 0;
891 font-size: 14px;
892 text-transform: uppercase;
893 color: var(--carousel-color);
894 text-shadow: 0 1px var(--bg-color);
895}
896.status-carousel > ul {
897 --carousel-gap: 16px;
898 display: flex;
899 overflow-x: auto;
900 overflow-y: clip;
901 scroll-snap-type: x mandatory;
902 scroll-behavior: smooth;
903 margin: 0;
904 padding: 8px 16px;
905 gap: var(--carousel-gap);
906 align-items: flex-start;
907 counter-reset: index;
908 min-height: 160px;
909 max-height: 65vh;
910 max-height: 65dvh;
911}
912.status-carousel > ul > li {
913 scroll-snap-align: center;
914 scroll-snap-stop: always;
915 flex-shrink: 0;
916 display: flex;
917 width: 100%;
918 max-width: min(320px, calc(100% - 16px));
919 list-style: none;
920 margin: 0;
921 padding: 0;
922 /* max-height: 65vh;
923 max-height: 65dvh; */
924 counter-increment: index;
925 position: relative;
926}
927.status-carousel > ul > li:is(:empty, :has(> a:empty)) {
928 display: none;
929}
930.status-carousel .status-carousel-beacon {
931 margin-right: calc(-1 * var(--carousel-gap));
932 pointer-events: none;
933 opacity: 0;
934
935 ~ .status-carousel-beacon {
936 margin-left: calc(-1 * var(--carousel-gap));
937 }
938}
939/*
940 Assume that browsers that do support inline-size property also support container queries.
941 https://www.smashingmagazine.com/2021/05/css-container-queries-use-cases-migration-strategies/#progressive-enhancement-polyfills
942*/
943@supports not (contain: inline-size) {
944 @media (hover: hover) or (pointer: fine) or (min-width: 40em) {
945 .status-carousel > ul {
946 scroll-snap-type: none;
947 }
948 }
949}
950@container (min-width: 640px) {
951 .status-carousel > ul {
952 scroll-snap-type: none;
953 }
954}
955.status-carousel .content-container .content:only-child {
956 font-size: calc(100% + 25% * max(2 - var(--content-text-weight), 0));
957
958 &:has(.status-card) {
959 font-size: unset;
960 }
961}
962/* .status-carousel
963 .content-container[data-content-text-weight='1']
964 .media-container.media-eq1 {
965 /* LOL, this is madness, reading a value from the style attribute * /
966 height: auto;
967 min-height: 160px;
968 max-height: max(160px, 50vh);
969} */
970.status-carousel.boosts-carousel {
971 --carousel-color: var(--reblog-color);
972 --carousel-faded-color: var(--reblog-faded-color);
973}
974.status-carousel.boosts-carousel .status-reblog {
975 background-image: none;
976}
977.status-carousel.boosts-carousel > ul > li:before {
978 content: counter(index);
979 position: absolute;
980 left: 0;
981 font-size: 10px;
982 color: var(--text-insignificant-color);
983 padding: 6px;
984}
985
986.ui-state {
987 padding: 16px;
988 text-align: center;
989}
990
991.status-carousel-link {
992 display: block;
993 width: 100%;
994 text-decoration-line: none;
995 color: inherit;
996 user-select: none;
997 transition: background-color 0.2s ease-out;
998 -webkit-tap-highlight-color: transparent;
999 animation: appear 0.2s ease-out;
1000 border: 1px solid var(--outline-color);
1001 background-color: var(--bg-blur-color);
1002 border-radius: 16px;
1003 overflow: clip;
1004 box-shadow: 0 1px var(--bg-color);
1005
1006 &:has(.status-badge:not(:empty)) {
1007 border-top-right-radius: 8px;
1008 }
1009
1010 .status-carousel.boosts-carousel & {
1011 border-top-left-radius: 8px;
1012 }
1013}
1014.status-carousel-link::focus {
1015 background-color: var(--link-bg-hover-color);
1016}
1017@media (hover: hover) {
1018 .status-carousel-link:hover {
1019 background-color: var(--link-bg-hover-color);
1020 }
1021}
1022.status-carousel-link:active:not(:has(:is(.media, button):active)) {
1023 filter: brightness(0.95);
1024}
1025
1026.deck-backdrop {
1027 position: fixed;
1028 top: 0;
1029 right: 0;
1030 height: 100%;
1031 width: 100%;
1032 z-index: 1000;
1033 display: flex;
1034 background-color: var(--backdrop-color);
1035 animation: appear 0.2s ease-out;
1036}
1037.deck-backdrop > a {
1038 flex-grow: 1;
1039 /* backdrop-filter: saturate(0.75); */
1040}
1041@keyframes slide-in {
1042 0% {
1043 transform: translate3d(100%, 0, 0);
1044 }
1045 100% {
1046 transform: translate3d(0, 0, 0);
1047 }
1048}
1049.deck-backdrop .deck {
1050 width: var(--main-width);
1051 max-width: 100vw;
1052 background-color: var(--bg-color);
1053 box-shadow: -1px 0 var(--bg-color);
1054}
1055.deck-backdrop .deck.slide-in:not(.deck-view-full) {
1056 animation: slide-in 0.5s var(--timing-function);
1057}
1058.deck-backdrop .deck .status {
1059 max-width: var(--main-width);
1060}
1061.deck-backdrop .deck :is(.button-switch-view, .menu-switch-view) {
1062 display: none;
1063}
1064@media (min-width: 40em) {
1065 .deck-backdrop .deck .button-switch-view {
1066 display: inline-block;
1067 }
1068 .deck-backdrop .deck .menu-switch-view {
1069 display: flex;
1070 }
1071 .deck-backdrop .deck.deck-view-full {
1072 /* min-width: 100%; */
1073 width: 100%;
1074 background-image: radial-gradient(
1075 circle,
1076 transparent 30em,
1077 var(--bg-faded-color)
1078 );
1079 }
1080 .deck-backdrop .deck.deck-view-full > * {
1081 max-width: calc(var(--main-width) + 32px);
1082 margin: 0 auto;
1083 }
1084 .deck-backdrop .deck.deck-view-full .status {
1085 max-width: 100%;
1086 }
1087}
1088
1089.deck-close {
1090 color: var(--text-insignificant-color) !important;
1091}
1092.deck-close:is(:hover, :focus) {
1093 color: var(--text-color) !important;
1094}
1095
1096:is(button, .button).plain.has-badge:after {
1097 content: '';
1098 display: inline-block;
1099 position: absolute;
1100 right: 10px;
1101 width: 4px;
1102 height: 4px;
1103 border-radius: 50%;
1104 background-color: var(--link-color);
1105 opacity: 0.5;
1106}
1107
1108@keyframes fade-from-top {
1109 0% {
1110 transform: translate(-50%, -200%);
1111 opacity: 0;
1112 }
1113 100% {
1114 transform: translate(-50%, 0);
1115 opacity: 1;
1116 }
1117}
1118.updates-button {
1119 position: absolute;
1120 z-index: 2;
1121 top: 3em;
1122 animation: fade-from-top 0.3s var(--timing-function);
1123 left: 50%;
1124 margin-top: 16px;
1125 transform: translate(-50%, 0);
1126 font-size: 90%;
1127 pointer-events: auto;
1128 transition: all 0.3s ease-in-out;
1129
1130 header[hidden] & {
1131 opacity: 0;
1132 transform: translate(-50%, -100%) scale(0.9);
1133 pointer-events: none;
1134 animation: none !important;
1135 }
1136}
1137.updates-button .icon {
1138 vertical-align: top;
1139}
1140@media (pointer: coarse) {
1141 .updates-button:after {
1142 content: '';
1143 position: absolute;
1144 inset: -16px;
1145 }
1146}
1147
1148/* BOX */
1149
1150.box {
1151 width: var(--main-width);
1152 max-width: 100vw;
1153 padding: 16px;
1154}
1155
1156/* CAROUSEL */
1157/* use snap, center children, max width viewport */
1158
1159.media-modal-container {
1160 position: relative;
1161 width: 70%;
1162 flex-grow: 1;
1163 background-color: var(--backdrop-solid-color);
1164 animation: appear 0.3s var(--timing-function) both;
1165 transition: width 0.3s var(--timing-function);
1166
1167 &:only-child {
1168 width: 100%;
1169 }
1170}
1171.media-modal-container.loading {
1172 display: flex;
1173 justify-content: center;
1174 align-items: center;
1175 background-image: radial-gradient(
1176 closest-side,
1177 var(--bg-blur-color),
1178 transparent
1179 );
1180}
1181
1182.carousel {
1183 display: flex;
1184 overflow-x: auto;
1185 scroll-snap-type: x mandatory;
1186 /* scroll-behavior: smooth; */
1187 scrollbar-width: none;
1188 overscroll-behavior: contain;
1189 touch-action: pan-x;
1190 user-select: none;
1191 width: 100%;
1192 gap: 16px;
1193}
1194.carousel::-webkit-scrollbar {
1195 display: none;
1196}
1197.carousel .carousel-item {
1198 scroll-snap-align: center;
1199 scroll-snap-stop: always;
1200 flex-shrink: 0;
1201 display: flex;
1202 justify-content: center;
1203 align-items: center;
1204 width: 100%;
1205 height: 100vh;
1206 height: 100dvh;
1207 background-color: var(--accent-alpha-color);
1208 /* background-image: radial-gradient(
1209 closest-side,
1210 var(--accent-color) 10%,
1211 var(--accent-alpha-color) 40%,
1212 transparent 100%
1213 ); */
1214}
1215.carousel .carousel-item :is(img, video) {
1216 width: auto;
1217 max-width: 100%;
1218 height: auto;
1219 max-height: 100vh;
1220 max-height: 100dvh;
1221 vertical-align: middle;
1222}
1223.carousel .carousel-item video {
1224 min-height: 80px;
1225 max-height: 80vh; /* prevent other UI elements from obscuring video */
1226}
1227.carousel .carousel-item .media {
1228 background-size: contain;
1229 background-repeat: no-repeat;
1230 background-position: center;
1231 width: 100%;
1232 height: 100%;
1233 overflow: hidden;
1234 display: flex;
1235 justify-content: center;
1236 align-items: center;
1237 padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0)
1238 env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
1239 background-origin: content-box;
1240}
1241
1242.carousel-top-controls {
1243 top: 0;
1244 top: env(safe-area-inset-top, 0);
1245}
1246:is(.carousel-top-controls, .carousel-controls) {
1247 /* mix-blend-mode: luminosity; */
1248 position: absolute;
1249 left: 0;
1250 left: env(safe-area-inset-left, 0);
1251 right: 0;
1252 right: env(safe-area-inset-right, 0);
1253 padding: 16px;
1254 display: flex;
1255 gap: 8px;
1256 justify-content: space-between;
1257 text-align: center;
1258 pointer-events: none;
1259}
1260:is(.carousel-top-controls, .carousel-controls)[hidden] {
1261 opacity: 0;
1262}
1263.carousel-controls {
1264 top: 45%;
1265}
1266
1267:is(.button, button).carousel-button,
1268button.carousel-dot {
1269 pointer-events: auto;
1270 font-weight: bold;
1271 color: var(--text-color);
1272 background-color: var(--bg-faded-blur-color);
1273 border: 1px solid var(--outline-color);
1274 box-shadow: 0 4px 32px var(--drop-shadow-color);
1275 transition: all 0.2s ease-out;
1276}
1277button.carousel-dot {
1278 background-color: transparent;
1279}
1280:is(.button, button).carousel-button {
1281 background-color: var(--bg-blur-color);
1282}
1283:is(.button, button).carousel-button:is(:hover, :focus):not(:active) {
1284 background-color: var(--bg-color);
1285}
1286.carousel-top-controls .szh-menu-container {
1287 pointer-events: auto;
1288}
1289:is(.button, button).carousel-button[hidden] {
1290 display: inline-block;
1291 opacity: 0;
1292 pointer-events: none;
1293}
1294.carousel-dots {
1295 border-radius: 999px;
1296 background-color: var(--bg-faded-blur-color);
1297 border: 1px solid var(--outline-color);
1298 box-shadow: 0 4px 32px var(--drop-shadow-color);
1299 /* backdrop-filter: blur(12px) invert(0.25); */
1300 transition: background-color 0.2s ease-out;
1301 &:hover {
1302 background-color: var(--bg-color);
1303 }
1304}
1305button.carousel-dot {
1306 backdrop-filter: none !important;
1307 border: none;
1308 box-shadow: none;
1309}
1310/* button.carousel-dot[disabled] {
1311 pointer-events: none;
1312} */
1313button.carousel-dot .icon {
1314 transition: all 0.2s;
1315 transform: scale(0.5);
1316}
1317button.carousel-dot:not(.active) .icon {
1318 opacity: 0.5;
1319}
1320button.carousel-dot:not(.active):is(:hover, :focus) .icon {
1321 opacity: 1;
1322}
1323button.carousel-dot:is(.active, [disabled].active) {
1324 opacity: 1;
1325}
1326button.carousel-dot:is(.active, [disabled].active) .icon {
1327 opacity: 1;
1328 transform: scale(1);
1329}
1330@media (hover: hover) {
1331 .carousel-top-controls {
1332 transform: translateY(-100%);
1333 transition: transform 0.2s ease-in-out;
1334 }
1335 .carousel-controls {
1336 transform: scale(0);
1337 /* transition: transform 0.2s ease-in-out; */
1338 }
1339 .carousel-controls
1340 :is(.button, button).carousel-button:is(:hover, :focus):not(:active) {
1341 transform: scale(1.2);
1342 }
1343 .carousel-controls :is(.button, button).carousel-button:active {
1344 transition-duration: 0s;
1345 }
1346
1347 :is(.carousel-top-controls, .carousel-controls)[hidden] {
1348 opacity: 1;
1349 }
1350 .carousel:hover + .carousel-top-controls,
1351 .carousel:hover + .carousel-top-controls + .carousel-controls,
1352 .carousel-top-controls:hover,
1353 .carousel-controls:hover,
1354 .carousel-top-controls:focus-within,
1355 .carousel-controls:focus-within {
1356 transform: translateY(0);
1357 }
1358}
1359
1360/* CAROUSEL + STATUS PAGE COMBO */
1361
1362.media-post-link .button-label {
1363 display: none;
1364}
1365body:has(.status-deck) .media-post-link {
1366 display: none;
1367}
1368.media-modal-count-1 .button-label {
1369 display: inline;
1370}
1371
1372/* ✨ New */
1373body:has(.media-modal-container + .status-deck) .media-post-link {
1374 display: inline-block;
1375}
1376.media-modal-container + .status-deck {
1377 /* display: none; */
1378 position: absolute;
1379 z-index: -1;
1380 pointer-events: none;
1381 user-select: none;
1382 animation: none;
1383}
1384
1385@media (min-width: calc(40em + 350px)) {
1386 .media-post-link .button-label {
1387 display: inline;
1388 }
1389 #modal-container > div,
1390 .status-deck {
1391 transition: all 0.3s ease-in-out;
1392 }
1393 /* Don't do this if there's a modal sheet (.sheet) */
1394 :has(#modal-container .carousel):has(.status-deck):not(
1395 :has(.sheet, #compose-container)
1396 )
1397 .status-deck {
1398 width: 350px;
1399 min-width: 0;
1400 }
1401 :has(#modal-container .carousel):has(.status-deck):not(
1402 :has(.sheet, #compose-container)
1403 )
1404 #modal-container
1405 > div {
1406 left: 0;
1407 right: 350px;
1408 width: auto;
1409 }
1410 /* ✨ New */
1411 /* .deck-backdrop > a {
1412 width: 100%;
1413 flex-grow: 0;
1414 } */
1415 .deck-backdrop .media-modal-container + .status-deck:not(.deck-view-full) {
1416 /* display: block; */
1417 width: 30%;
1418 /* min-width: 350px; */
1419 position: static;
1420 z-index: 1;
1421 pointer-events: auto;
1422 user-select: auto;
1423 }
1424 .deck-backdrop .media-modal-container + .status-deck:not(.slide-in) {
1425 animation: appear 0.3s ease-in-out;
1426 }
1427 body:has(.media-modal-container + .status-deck) .media-post-link {
1428 display: none;
1429 }
1430}
1431
1432/* COMPOSE BUTTON */
1433
1434#compose-button {
1435 position: fixed;
1436 bottom: 16px;
1437 bottom: max(16px, env(safe-area-inset-bottom));
1438 right: 16px;
1439 right: max(16px, env(safe-area-inset-right));
1440 padding: 16px;
1441 background-color: var(--button-bg-blur-color);
1442 /* backdrop-filter: blur(16px); */
1443 z-index: 10;
1444 box-shadow: 0 3px 8px -1px var(--drop-shadow-color),
1445 0 10px 36px -4px var(--button-bg-blur-color);
1446 transition: all 0.3s ease-in-out;
1447}
1448.deck-container:has(header[hidden]) ~ #compose-button,
1449#compose-button[hidden] {
1450 transform: translateY(200%);
1451 pointer-events: none;
1452 user-select: none;
1453 opacity: 0;
1454}
1455#compose-button .icon {
1456 transition: transform 0.3s ease-in-out;
1457}
1458#compose-button[hidden] .icon {
1459 transform: rotate3d(0, 0, 1, -25deg);
1460}
1461#compose-button:is(:hover, :focus) {
1462 background-color: var(--button-bg-color);
1463 filter: none;
1464}
1465#compose-button:active {
1466 transform: scale(0.95);
1467 transition: none;
1468}
1469#compose-button .icon {
1470 filter: drop-shadow(0 1px 2px var(--button-bg-color));
1471}
1472@media (max-width: calc(40em - 1px)) {
1473 #app[data-shortcuts-view-mode='tab-menu-bar'] #compose-button {
1474 bottom: calc(16px + 52px);
1475 bottom: calc(16px + env(safe-area-inset-bottom) + 52px);
1476 }
1477}
1478
1479/* SHEET */
1480
1481.sheet {
1482 align-self: flex-end;
1483 display: flex;
1484 flex-direction: column;
1485 max-height: 90vh;
1486 max-height: 90dvh;
1487 /* overflow: hidden; */
1488 background-color: var(--bg-color);
1489 width: 100%;
1490 max-width: calc(var(--main-width) - 50px - 16px);
1491 border-radius: 16px 16px 0 0;
1492 box-shadow: 0 -1px 32px var(--drop-shadow-color);
1493 animation: slide-up 0.3s var(--timing-function);
1494 /* border: 1px solid var(--outline-color); */
1495 position: relative;
1496}
1497.sheet-max {
1498 max-width: none;
1499 height: 90vh;
1500 height: 90dvh;
1501}
1502@media (min-width: 40em) {
1503 .sheet {
1504 width: 90vw;
1505 width: 90dvw;
1506 }
1507}
1508.sheet .sheet-close {
1509 position: absolute;
1510 border-radius: 0;
1511 padding: 0;
1512 right: env(safe-area-inset-right);
1513 width: 44px;
1514 height: 44px;
1515 display: inline-flex;
1516 align-items: center;
1517 justify-content: center;
1518 z-index: 2;
1519 background-color: transparent;
1520 background-image: radial-gradient(
1521 circle,
1522 var(--close-button-bg-color) 0px 14px,
1523 transparent 14px
1524 );
1525 color: var(--close-button-color);
1526}
1527.sheet .sheet-close.outer {
1528 margin-top: -44px;
1529 background-image: radial-gradient(
1530 circle,
1531 var(--bg-faded-color) 0px 13px,
1532 var(--outline-color) 13px 14px,
1533 transparent 14px
1534 );
1535}
1536.sheet .sheet-close:is(:hover, :focus) {
1537 color: var(--close-button-hover-color);
1538}
1539.sheet .sheet-close:active {
1540 background-image: radial-gradient(
1541 circle,
1542 var(--close-button-bg-active-color) 0px 14px,
1543 transparent 14px
1544 );
1545}
1546.sheet header {
1547 padding: 16px 16px 8px;
1548 padding-left: max(16px, env(safe-area-inset-left));
1549 padding-right: max(16px, env(safe-area-inset-right));
1550 user-select: none;
1551}
1552.sheet .sheet-close:not(.outer) + header {
1553 padding-right: max(44px, env(safe-area-inset-right));
1554}
1555.sheet header :is(h1, h2, h3) {
1556 margin: 0;
1557}
1558.sheet header.header-grid {
1559 display: grid;
1560 grid-template-columns: 1fr auto;
1561 grid-gap: 8px;
1562 align-items: center;
1563}
1564.sheet main {
1565 overflow: auto;
1566 overflow-x: hidden;
1567 overscroll-behavior: contain;
1568 padding: 16px 16px;
1569 padding-left: max(16px, env(safe-area-inset-left));
1570 padding-right: max(16px, env(safe-area-inset-right));
1571 padding-bottom: max(16px, env(safe-area-inset-bottom));
1572}
1573.sheet header + main {
1574 padding-top: 0;
1575 mask-image: linear-gradient(to bottom, transparent 0%, black 10px);
1576}
1577
1578/* ICON */
1579
1580.icon {
1581 flex-shrink: 0;
1582 display: inline-block;
1583 overflow: hidden;
1584 line-height: 0;
1585
1586 svg {
1587 contain: none;
1588 }
1589}
1590
1591/* TAG */
1592
1593.tag {
1594 font-size: smaller;
1595 color: var(--bg-faded-color);
1596 background-color: var(--text-insignificant-color);
1597 padding: 2px 4px;
1598 border-radius: 4px;
1599 display: inline-block;
1600 margin: 4px;
1601 align-self: center;
1602 text-align: center;
1603
1604 &.clickable {
1605 cursor: pointer;
1606 }
1607}
1608.tag .icon {
1609 vertical-align: middle;
1610}
1611.tag.collapsed {
1612 margin: 0;
1613}
1614.tag.insignificant {
1615 border: 1px solid var(--outline-color);
1616 color: var(--text-insignificant-color);
1617 background-color: var(--bg-faded-color);
1618}
1619.tag.danger {
1620 background-color: var(--red-color);
1621}
1622.tag.minimal {
1623 margin: 0;
1624 color: var(--text-insignificant-color);
1625 background-color: var(--bg-faded-color);
1626 text-shadow: 0 1px var(--bg-color);
1627 line-height: 1;
1628}
1629
1630/* MENU POPUP */
1631
1632.szh-menu-container {
1633 user-select: none;
1634 -webkit-touch-callout: none;
1635 -webkit-user-drag: none;
1636}
1637body > .szh-menu-container {
1638 position: fixed !important;
1639 z-index: 10;
1640}
1641.szh-menu-container:not(:empty) {
1642 inset: 0;
1643 inset: env(safe-area-inset-top) env(safe-area-inset-right)
1644 env(safe-area-inset-bottom) env(safe-area-inset-left);
1645}
1646.szh-menu {
1647 padding: 8px 0;
1648 margin: 0;
1649 font-size: var(--text-size);
1650 background-color: var(--bg-color);
1651 border: 1px solid var(--outline-color);
1652 border-radius: 8px;
1653 box-shadow: 0 3px 16px -3px var(--drop-shadow-color);
1654 text-align: left;
1655 /* animation: appear-smooth 0.15s ease-in-out; */
1656 width: 16em;
1657 max-width: 90vw;
1658 /* overflow: hidden; */
1659}
1660.szh-menu[aria-label='Submenu'] {
1661 background-color: var(--bg-blur-color);
1662 backdrop-filter: blur(4px);
1663 box-shadow: 0 3px 24px -3px var(--drop-shadow-color);
1664}
1665.szh-menu__header {
1666 margin: -8px 0 8px;
1667 padding: 8px 16px;
1668 color: var(--text-insignificant-color);
1669 font-size: 90%;
1670 background-color: var(--bg-faded-color);
1671 /* background-image: linear-gradient(to top, var(--bg-faded-color), transparent); */
1672 text-shadow: 0 1px 0 var(--bg-color);
1673 line-height: 1.2;
1674 /* border-bottom: 1px solid var(--outline-color); */
1675 border-radius: 8px 8px 0 0;
1676}
1677.szh-menu__header.plain {
1678 margin-bottom: 0;
1679 background-color: transparent;
1680}
1681.szh-menu__header * {
1682 vertical-align: middle;
1683}
1684.szh-menu.menu-emphasized {
1685 border-color: var(--outline-hover-color);
1686 box-shadow: 0 3px 16px -3px var(--drop-shadow-color),
1687 0 3px 32px var(--drop-shadow-color), 0 3px 48px var(--drop-shadow-color);
1688 background-color: var(--bg-color);
1689 animation-duration: 0.3s;
1690 animation-timing-function: ease-in-out;
1691 width: auto;
1692}
1693.szh-menu .footer {
1694 margin: 8px 0 -8px;
1695 padding: 8px 16px;
1696 color: var(--text-insignificant-color);
1697 font-size: 90%;
1698 background-color: var(--bg-faded-color);
1699 text-shadow: 0 1px 0 var(--bg-color);
1700 line-height: 1.2;
1701 display: flex;
1702 gap: 8px;
1703 align-items: center;
1704 border-radius: 0 0 8px 8px;
1705}
1706.szh-menu .szh-menu__item {
1707 display: flex;
1708 gap: 8px;
1709 align-items: center;
1710 line-height: 1.1;
1711 padding: 8px 16px !important;
1712 transition: all 0.1s ease-in-out;
1713 text-decoration: none;
1714 white-space: nowrap;
1715 overflow: hidden;
1716 text-overflow: ellipsis;
1717}
1718.szh-menu .szh-menu__item--focusable {
1719 background-color: transparent;
1720}
1721.szh-menu .szh-menu__item span {
1722 white-space: nowrap;
1723 overflow: hidden;
1724 text-overflow: ellipsis;
1725}
1726/* .szh-menu .szh-menu__item * {
1727 vertical-align: middle;
1728} */
1729.szh-menu .szh-menu__item a {
1730 flex: 1;
1731 overflow: hidden;
1732 text-overflow: ellipsis;
1733 display: flex;
1734 gap: 8px;
1735 color: inherit;
1736 text-decoration: none;
1737 padding: 8px 16px !important;
1738 margin: -8px -16px !important;
1739 align-items: center;
1740 user-select: none;
1741 -webkit-touch-callout: none;
1742}
1743.szh-menu .szh-menu__item a.is-active {
1744 font-weight: bold;
1745}
1746.szh-menu .szh-menu__item .icon {
1747 opacity: 0.5;
1748}
1749.szh-menu
1750 .szh-menu__item:not(.szh-menu__item--disabled, .szh-menu__item--hover) {
1751 color: var(--text-color);
1752}
1753.szh-menu .szh-menu__item--hover:not(.menu-field) {
1754 color: var(--button-text-color);
1755 background-color: var(--button-bg-color);
1756}
1757.szh-menu__divider {
1758 background-color: var(--divider-color);
1759}
1760.szh-menu .szh-menu__item .menu-grow {
1761 flex-grow: 1;
1762 text-overflow: ellipsis;
1763 overflow: hidden;
1764}
1765.szh-menu .menu-double-lines {
1766 white-space: normal !important;
1767 display: -webkit-box;
1768 -webkit-line-clamp: 2;
1769 -webkit-box-orient: vertical;
1770 overflow: hidden !important;
1771}
1772.szh-menu .menu-double-lines span {
1773 white-space: normal;
1774 line-height: inherit;
1775 font-size: inherit;
1776}
1777.szh-menu .menu-horizontal {
1778 display: grid;
1779 /* two columns only */
1780 grid-template-columns: repeat(2, 1fr);
1781}
1782.szh-menu .menu-horizontal:has(> .szh-menu__item:only-child) {
1783 grid-template-columns: 1fr;
1784}
1785.szh-menu .menu-horizontal > .szh-menu__item:not(:only-child):first-child,
1786.szh-menu .menu-horizontal > *:not(:only-child):first-child .szh-menu__item {
1787 padding-right: 4px !important;
1788}
1789.szh-menu
1790 .menu-horizontal
1791 > .szh-menu__item:not(:only-child):not(:first-child):not(:last-child),
1792.szh-menu
1793 .menu-horizontal
1794 > *:not(:only-child):not(:first-child):not(:last-child)
1795 .szh-menu__item {
1796 padding-left: 8px !important;
1797 padding-right: 4px !important;
1798}
1799.szh-menu .menu-horizontal > .szh-menu__item:not(:only-child):last-child,
1800.szh-menu .menu-horizontal > *:not(:only-child):last-child .szh-menu__item {
1801 padding-left: 8px !important;
1802}
1803.szh-menu .szh-menu__item .menu-shortcut {
1804 opacity: 0.5;
1805 font-weight: normal;
1806}
1807.szh-menu .szh-menu__item form {
1808 display: flex;
1809 flex: 1;
1810 gap: 8px;
1811 align-items: center;
1812}
1813.szh-menu .szh-menu__item form > input[type='text'] {
1814 flex-grow: 1;
1815 width: 100%;
1816}
1817.szh-menu .szh-menu__item--hover .danger-icon {
1818 color: var(--red-color);
1819 opacity: 1;
1820}
1821.szh-menu
1822 .szh-menu__item:not(.szh-menu__item--disabled):not(
1823 .szh-menu__item--hover
1824 ).danger {
1825 color: var(--red-color);
1826}
1827.szh-menu
1828 .szh-menu__item:not(.szh-menu__item--disabled):not(
1829 .szh-menu__item--hover
1830 ).danger
1831 .icon {
1832 opacity: 1;
1833}
1834
1835.szh-menu
1836 .szh-menu__item--type-checkbox:not(.szh-menu__item--disabled):not(
1837 .szh-menu__item--hover
1838 ) {
1839 .icon {
1840 opacity: 0.15;
1841 }
1842
1843 &.szh-menu__item--checked {
1844 color: var(--link-color);
1845
1846 .icon {
1847 opacity: 1;
1848 color: inherit;
1849 }
1850 }
1851}
1852
1853.szh-menu .menu-wrap {
1854 display: flex;
1855 flex-wrap: wrap;
1856}
1857.szh-menu .menu-wrap > * {
1858 flex-grow: 1;
1859 flex-basis: 50%;
1860}
1861
1862/* GLASS MENU */
1863
1864.glass-menu {
1865 background-color: var(--bg-blur-color);
1866 backdrop-filter: blur(8px) saturate(3);
1867 border: var(--hairline-width) solid var(--bg-color);
1868 box-shadow: 0 3px 8px -1px var(--drop-shadow-color);
1869 text-shadow: 0 var(--hairline-width) var(--bg-color), 0 0 8px var(--bg-color);
1870}
1871.glass-menu .szh-menu__item--hover {
1872 background-color: var(--button-bg-blur-color);
1873 text-shadow: none;
1874}
1875
1876/* DONUT METER */
1877
1878meter.donut {
1879 appearance: none;
1880}
1881
1882meter.donut::-webkit-meter-inner-element,
1883meter.donut::-webkit-meter-bar,
1884meter.donut::-webkit-meter-optimum-value,
1885meter.donut::-webkit-meter-suboptimum-value,
1886meter.donut::-webkit-meter-even-less-good-value {
1887 display: none;
1888}
1889
1890meter.donut::-moz-meter-bar {
1891 background: transparent;
1892}
1893
1894meter.donut {
1895 position: relative;
1896 --dimension: 24px;
1897 --border-width: 2px;
1898 --middle-circle-radius: calc(var(--dimension) / 2 - var(--border-width));
1899 width: var(--dimension);
1900 height: var(--dimension);
1901 border-radius: 50%;
1902 --fill: calc(var(--percentage) * 1%);
1903 --color: var(--link-color);
1904 --middle-circle: radial-gradient(
1905 circle at 50% 50%,
1906 var(--bg-color) var(--middle-circle-radius),
1907 transparent var(--middle-circle-radius)
1908 );
1909 background-image: var(--middle-circle),
1910 conic-gradient(var(--color) var(--fill), var(--outline-color) 0);
1911 transform: scale(0.7);
1912 transition: transform 0.2s ease-in-out;
1913}
1914meter.donut.warning {
1915 --color: var(--orange-color);
1916 transform: scale(1);
1917}
1918meter.donut.danger {
1919 --color: var(--red-color);
1920 transform: scale(1);
1921}
1922meter.donut.explode {
1923 background-image: none;
1924 transform: scale(1);
1925}
1926meter.donut:is(.warning, .danger, .explode):after {
1927 content: attr(data-left);
1928 position: absolute;
1929 top: 50%;
1930 left: 50%;
1931 transform: translate(-50%, -50%);
1932 font-size: 12px;
1933 color: var(--text-insignificant-color);
1934}
1935meter.donut:is(.danger, .explode):after {
1936 color: var(--red-color);
1937}
1938meter.donut[hidden] {
1939 display: inline-block;
1940 visibility: hidden;
1941}
1942
1943/* SHINY PILL */
1944
1945:is(.shiny-pill, :root .toastify.shiny-pill) {
1946 pointer-events: auto;
1947 color: var(--link-text-color);
1948 font-weight: 500;
1949 text-shadow: 0 1px var(--bg-color);
1950 background-color: var(--bg-color);
1951 border: 2px solid var(--link-faded-color);
1952 box-shadow: 0 3px 16px var(--drop-shadow-color),
1953 0 6px 16px -3px var(--drop-shadow-color);
1954}
1955:is(.shiny-pill, :root .toastify.shiny-pill):hover:not(:active) {
1956 color: var(--text-color);
1957 border-color: var(--link-color);
1958 filter: none !important;
1959 box-shadow: 0 3px 16px var(--drop-shadow-color),
1960 0 6px 16px -3px var(--drop-shadow-color),
1961 0 6px 16px var(--drop-shadow-color);
1962}
1963
1964/* TOAST */
1965
1966:root .toastify {
1967 user-select: none;
1968 padding: 8px 16px;
1969 border-radius: 999px;
1970 pointer-events: none;
1971 color: var(--button-text-color);
1972 text-shadow: 0 calc(var(--hairline-width) * -1) var(--drop-shadow-color);
1973 background-color: var(--button-bg-color);
1974 background-image: none;
1975 box-shadow: 0 3px 8px -1px var(--drop-shadow-color),
1976 0 10px 36px -4px var(--button-bg-blur-color);
1977 text-align: center;
1978}
1979.toastify-bottom {
1980 margin-bottom: env(safe-area-inset-bottom);
1981}
1982
1983/* TOAST - ALERT */
1984
1985:root .toastify.alert {
1986 z-index: 1001;
1987 box-shadow: 0 8px 32px var(--text-insignificant-color);
1988 background-color: var(--bg-color);
1989 color: var(--text-color);
1990 cursor: pointer;
1991 pointer-events: auto;
1992 padding: 16px 32px;
1993 font-size: max(calc(16px * 1.1), var(--text-size));
1994 text-align: center;
1995 line-height: 1.25;
1996}
1997:root .toastify.alert:is(:hover, :active) {
1998 background-color: var(--bg-faded-color);
1999}
2000
2001/* AVATARS STACK */
2002
2003.avatars-stack {
2004 display: flex;
2005 flex-wrap: wrap;
2006 gap: 4px;
2007}
2008/* I'm just feeling bored, so having fun here */
2009@media (hover: hover) {
2010 .avatars-stack > * img {
2011 transition: transform 0.3s ease-in-out;
2012 }
2013 .avatars-stack:hover > *:nth-of-type(odd) img {
2014 transform: rotate(15deg);
2015 }
2016 .avatars-stack:hover > *:nth-of-type(even) img {
2017 transform: rotate(-15deg);
2018 }
2019}
2020
2021/* 404 */
2022
2023#not-found-page {
2024 display: flex;
2025 align-items: center;
2026 justify-content: center;
2027 text-align: center;
2028 overflow: hidden;
2029 cursor: default;
2030 color: var(--text-insignificant-color);
2031 background-image: radial-gradient(
2032 circle at 50% 50%,
2033 var(--bg-color) 25%,
2034 var(--bg-faded-color)
2035 );
2036 text-shadow: 0 1px var(--bg-color);
2037}
2038
2039/* ACCOUNT STATUSES */
2040
2041@keyframes peekaboo-header {
2042 from {
2043 opacity: 0;
2044 transform: translateY(10%);
2045 }
2046 to {
2047 opacity: 1;
2048 transform: translateY(0);
2049 }
2050}
2051
2052@supports (animation-timeline: scroll()) {
2053 .header-account {
2054 animation: peekaboo-header 1s linear both;
2055 animation-timeline: scroll();
2056 animation-range: 0 150px;
2057 }
2058}
2059
2060/* LINK LISTS? */
2061
2062ul.link-list {
2063 list-style: none;
2064 padding: 16px;
2065 margin: 0;
2066 display: flex;
2067 flex-direction: column;
2068 gap: 1px;
2069}
2070ul.link-list li {
2071 padding: 0;
2072 margin: 0;
2073}
2074ul.link-list li a {
2075 --radius: 8px;
2076 display: block;
2077 background-color: var(--bg-faded-color);
2078 line-height: 1.25;
2079 padding: 12px;
2080 text-decoration: none;
2081 line-height: 1.4;
2082 font-weight: 500;
2083 display: flex;
2084 align-items: center;
2085 gap: 8px;
2086
2087 .count {
2088 font-size: 80%;
2089 display: inline-block;
2090 color: var(--text-insignificant-color);
2091 min-width: 16px;
2092 min-height: 16px;
2093 padding: 4px;
2094 background-color: var(--bg-color);
2095 border-radius: 4px;
2096
2097 @media (min-width: 40em) {
2098 background-color: var(--bg-faded-color);
2099 }
2100 }
2101}
2102ul.link-list li:first-child a {
2103 border-top-left-radius: var(--radius);
2104 border-top-right-radius: var(--radius);
2105}
2106ul.link-list li:last-child a {
2107 border-bottom-left-radius: var(--radius);
2108 border-bottom-right-radius: var(--radius);
2109}
2110ul.link-list li a:is(:hover, :focus) {
2111 color: var(--text-color);
2112}
2113ul.link-list li a:active {
2114 filter: brightness(0.9);
2115}
2116ul.link-list li a * {
2117 vertical-align: middle;
2118}
2119ul.link-list li a .icon {
2120 flex-shrink: 0;
2121}
2122
2123@media (min-width: 40em) {
2124 ul.link-list li a {
2125 background-color: var(--bg-color);
2126 }
2127}
2128
2129/* NAV MENU BUTTON */
2130
2131.nav-menu-button.with-avatar {
2132 position: relative;
2133}
2134.nav-menu-button:is(:hover, :focus):not(:active) {
2135 filter: none !important;
2136}
2137.nav-menu-button .avatar {
2138 transition: box-shadow 0.3s ease-out;
2139}
2140.nav-menu-button:is(:hover, :focus, .active) .avatar {
2141 box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px var(--link-light-color);
2142}
2143.nav-menu-button.with-avatar .icon {
2144 position: absolute;
2145 bottom: 4px;
2146 right: 8px;
2147 background-color: var(--bg-color);
2148 border-radius: 2px;
2149}
2150.nav-menu-button.with-avatar:hover:not(:active, .active) .icon {
2151 transform: translateY(-1px);
2152}
2153
2154/* COLUMNS */
2155
2156#columns {
2157 display: flex;
2158 width: 100vw;
2159 overflow-y: hidden;
2160 overflow-x: scroll;
2161 scroll-snap-type: x mandatory;
2162 scroll-behavior: smooth;
2163 /* scrollbar-width: none; */
2164 overscroll-behavior: contain;
2165 overscroll-behavior-x: contain;
2166 /* This `transform` fixes horizontal scrolling for pointer devices on iPad */
2167 transform: translateZ(0);
2168}
2169/* #columns::-webkit-scrollbar {
2170 display: none;
2171} */
2172#columns > * {
2173 overscroll-behavior: auto;
2174 scroll-snap-align: left;
2175 scroll-snap-stop: always;
2176 overscroll-behavior: auto;
2177 flex-basis: min(100vw, 360px);
2178 flex-shrink: 0;
2179 box-shadow: -1px 0 var(--bg-color), -2px 0 var(--drop-shadow-color),
2180 -3px 0 var(--bg-color);
2181}
2182#columns:has(> :nth-child(3)) > *:nth-child(even),
2183#columns:has(> :nth-child(3))
2184 > *:nth-child(even)
2185 .timeline-deck
2186 > header
2187 .header-grid {
2188 background-color: var(--bg-blur-color);
2189}
2190#columns .header-grid input {
2191 pointer-events: none;
2192}
2193#columns {
2194 /* Any buttons except nav menu button on first header-side, on 1st column */
2195 .deck-container:first-of-type
2196 .header-grid
2197 .header-side:first-of-type
2198 > *:not(.nav-menu-button),
2199 /* Any buttons on last header-side, on 1st column */
2200 .deck-container:first-of-type .header-grid .header-side:last-of-type > *,
2201 /* Any buttons on any header-side, on columns after 1st */
2202 .deck-container:not(:first-of-type) .header-grid .header-side > * {
2203 display: none;
2204 }
2205}
2206@media (min-width: 40em) {
2207 #columns {
2208 /* gap: 16px; */
2209 /* padding: 0 16px; */
2210 /* background-color: var(--bg-faded-color); */
2211 height: 100vh;
2212 height: 100dvh;
2213 justify-content: stretch;
2214 align-items: stretch;
2215 }
2216 #columns > * {
2217 padding: 0 16px;
2218 border-inline: var(--hairline-width) solid var(--bg-faded-color);
2219 /* border-radius: 16px; */
2220 /* box-shadow: -4px 0 16px -8px var(--drop-shadow-color); */
2221 height: unset;
2222 /* background-color: var(--bg-faded-blur-color); */
2223 /* backdrop-filter: blur(16px) saturate(3); */
2224 /* background-image: linear-gradient(
2225 160deg,
2226 transparent 20%,
2227 var(--bg-color),
2228 transparent 75%
2229 ); */
2230 /* position: sticky;
2231 left: 0; */
2232 /* transition: all 0.3s ease-out; */
2233 }
2234 /* #columns > *:nth-child(2) {
2235 left: 5%;
2236 }
2237 #columns > *:nth-child(3) {
2238 left: 10%;
2239 }
2240 #columns > *:nth-child(4) {
2241 left: 15%;
2242 }
2243 #columns > *:nth-child(5) {
2244 left: 20%;
2245 }
2246 #columns > *:nth-child(6) {
2247 left: 25%;
2248 }
2249 #columns > *:nth-child(7) {
2250 left: 30%;
2251 }
2252 #columns > *:nth-child(8) {
2253 left: 35%;
2254 }
2255 #columns > *:nth-child(9) {
2256 left: 40%;
2257 }
2258 #columns > *:nth-child(10) {
2259 left: 45%;
2260 }
2261 #columns > *:focus {
2262 z-index: 1;
2263 box-shadow: 0 0 32px var(--drop-shadow-color),
2264 0 0 32px var(--drop-shadow-color);
2265 } */
2266 /* #columns:has(> *:focus) > *:not(:focus) > * {
2267 filter: opacity(0.8);
2268 } */
2269
2270 #columns > *:focus-visible,
2271 #columns > *:has(:focus-visible) {
2272 /* box-shadow: 0 4px 16px var(--drop-shadow-color),
2273 0 4px 16px var(--drop-shadow-color); */
2274 /* border-color: var(--outline-hover-color); */
2275 z-index: 1;
2276 box-shadow: inset 0 0 0 1px var(--outline-hover-color);
2277 }
2278 #columns .timeline:not(.flat) > li:has(.status-link.is-active),
2279 #columns
2280 .timeline:not(.flat)
2281 > li:not(:has(.status-carousel)):has(+ li .status-link.is-active),
2282 #columns
2283 .timeline:not(.flat)
2284 > li:not(:has(.status-carousel)):has(.status-link.is-active)
2285 + li {
2286 transform: none;
2287 }
2288 #columns .timeline-deck > header {
2289 margin: 0;
2290 }
2291 #columns .timeline-deck > header[hidden] {
2292 transform: none;
2293 pointer-events: auto;
2294 }
2295 #columns li.timeline-item-carousel {
2296 width: auto;
2297 transform: none;
2298 }
2299}
2300
2301/* FILTER BAR */
2302
2303.filter-bar {
2304 padding: 8px 16px;
2305 background-color: var(--bg-faded-color);
2306 display: flex;
2307 gap: 8px;
2308 overflow-x: auto;
2309 mask-image: linear-gradient(
2310 to right,
2311 transparent,
2312 black 16px,
2313 black calc(100% - 16px),
2314 transparent
2315 );
2316 align-items: center;
2317 transition: opacity 0.3s ease-out;
2318
2319 &.expandable:not(#columns &) {
2320 @media (min-width: 40em) {
2321 width: 95vw;
2322 max-width: calc(320px * 3.3);
2323 transform: translateX(calc(-50% + var(--main-width) / 2));
2324 }
2325 }
2326
2327 &.loading,
2328 .loading > & {
2329 pointer-events: none;
2330 opacity: 0.5;
2331 }
2332
2333 .filter-field {
2334 flex-shrink: 0;
2335 padding: 8px 16px;
2336 border-radius: 999px;
2337 color: var(--text-color);
2338 background-color: var(--bg-color);
2339 background-image: none;
2340 border: 2px solid transparent;
2341 margin: 0;
2342 /* appearance: none; */
2343 line-height: 1;
2344 font-size: 90%;
2345 display: flex;
2346 gap: 8px;
2347
2348 > .icon {
2349 color: var(--link-color);
2350 }
2351
2352 &:placeholder-shown {
2353 color: var(--text-insignificant-color);
2354 }
2355
2356 &:is(:hover, :focus-visible) {
2357 border-color: var(--link-light-color);
2358 }
2359 &:focus {
2360 outline-color: var(--link-light-color);
2361 }
2362 &.is-active {
2363 border-color: var(--link-color);
2364 box-shadow: inset 0 0 8px var(--link-faded-color);
2365 }
2366
2367 :is(input, select) {
2368 background-color: transparent;
2369 background-image: none;
2370 border: 0;
2371 padding: 0;
2372 margin: 0;
2373 color: inherit;
2374 font-size: inherit;
2375 line-height: inherit;
2376 appearance: none;
2377 border-radius: 0;
2378 box-shadow: none;
2379 outline: none;
2380 }
2381
2382 input[type='month'] {
2383 min-width: 6em;
2384
2385 &::-webkit-calendar-picker-indicator {
2386 /* replace icon with triangle */
2387 opacity: 0.5;
2388 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"><path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
2389 }
2390
2391 @media (prefers-color-scheme: dark) {
2392 &::-webkit-calendar-picker-indicator {
2393 filter: invert(1);
2394 }
2395 }
2396 }
2397 }
2398}
2399.filter-bar.centered {
2400 justify-content: center;
2401}
2402@media (min-width: 40em) {
2403 .filter-bar {
2404 background-color: transparent;
2405 }
2406}
2407.filter-bar > a:not(.filter-clear) {
2408 padding: 8px 16px;
2409 border-radius: 999px;
2410 background-color: var(--bg-color);
2411 color: var(--link-color);
2412 text-decoration: none;
2413 white-space: nowrap;
2414 border: 2px solid transparent;
2415 transition: border-color 0.3s ease-out;
2416 display: inline-flex;
2417 align-items: center;
2418 gap: 8px;
2419}
2420.filter-bar > a:focus-visible {
2421 border-color: var(--link-light-color);
2422}
2423@media (hover: hover) {
2424 .filter-bar > a:hover {
2425 border-color: var(--link-light-color);
2426 }
2427}
2428.filter-bar > a > * {
2429 vertical-align: middle;
2430}
2431.filter-bar > a.is-active {
2432 border-color: var(--link-color);
2433 box-shadow: inset 0 0 8px var(--link-faded-color);
2434}
2435.filter-bar > a > .filter-count {
2436 font-size: 80%;
2437 display: inline-block;
2438 color: var(--text-insignificant-color);
2439 min-width: 16px;
2440 min-height: 16px;
2441 padding: 4px;
2442 margin: -4px -8px -4px 0;
2443 background-color: var(--bg-faded-color);
2444 border-radius: 999px;
2445}
2446
2447/* NOTIFICATION PEEK */
2448
2449.notification-peek .notification {
2450 padding-inline: 0 !important;
2451}
2452
2453/* OTHERS */
2454
2455@media (min-width: 40em) {
2456 html,
2457 body {
2458 background-color: var(--bg-faded-color);
2459 }
2460 .deck-container {
2461 background-color: var(--bg-faded-color);
2462 }
2463 #app {
2464 display: flex;
2465 }
2466 .deck-container {
2467 transition: transform 0.4s var(--timing-function);
2468 }
2469 .deck-container:has(~ .deck-backdrop .deck) {
2470 transition: transform 0.4s ease-out;
2471 transform: translate3d(-5vw, 0, 0);
2472 }
2473 .deck-backdrop .deck {
2474 /* width: 50%;
2475 min-width: var(--main-width); */
2476 border-left: 1px solid var(--divider-color);
2477 }
2478 .timeline-deck {
2479 border: 0;
2480 background-color: transparent;
2481 }
2482 .timeline-deck > header {
2483 --margin-top: 8px;
2484 top: var(--margin-top);
2485 margin-inline: 8px;
2486 }
2487 .timeline-deck > header .header-grid {
2488 border-bottom: 0;
2489 border-radius: 16px;
2490 background-color: var(--bg-faded-blur-color);
2491 backdrop-filter: blur(16px);
2492 background-image: none;
2493 border-radius: 16px;
2494 min-height: 4em;
2495 }
2496 .timeline-deck > header[hidden] {
2497 transform: translate3d(0, calc((100% + var(--margin-top)) * -1), 0);
2498 }
2499 .deck > header {
2500 text-shadow: 0 1px var(--bg-color);
2501
2502 form {
2503 text-shadow: none;
2504 }
2505 }
2506 .deck > header h1 {
2507 font-size: 1.5em;
2508 }
2509 .updates-button {
2510 margin-top: 24px;
2511 }
2512 .timeline:not(.flat) > li {
2513 --item-radius: 16px;
2514 border: 1px solid var(--divider-color);
2515 margin: 16px 0;
2516 background-color: var(--bg-color);
2517 border-radius: var(--item-radius);
2518 overflow: hidden;
2519 box-shadow: 0px 1px var(--bg-blur-color);
2520 transition: transform 0.4s var(--timing-function);
2521 --back-transition: transform 0.4s ease-out;
2522 }
2523 .timeline:not(.flat) > li > a {
2524 border-radius: inherit;
2525 }
2526 .timeline:not(.flat) > li:not(:has(.status-carousel)) {
2527 transform: translate3d(0, 0, 0);
2528 }
2529 .timeline:not(.flat)
2530 > li:not(.timeline-item-container-end, .timeline-item-container-middle):has(
2531 .status-badge:not(:empty)
2532 ) {
2533 border-top-right-radius: 8px;
2534 }
2535 .timeline:not(.flat) > li:has(.status-link.is-active) {
2536 transition: var(--back-transition);
2537 transform: translate3d(-2.5vw, 0, 0);
2538 }
2539 .timeline:not(.flat)
2540 > li.timeline-item-container:has(.status-link.is-active) {
2541 border-top-left-radius: var(--item-radius);
2542 border-bottom-left-radius: var(--item-radius);
2543 }
2544 .timeline:not(.flat)
2545 > li:not(:has(.status-carousel)):has(+ li .status-link.is-active),
2546 .timeline:not(.flat)
2547 > li:not(:has(.status-carousel)):has(.status-link.is-active)
2548 + li {
2549 transition: var(--back-transition);
2550 transform: translate3d(-1.25vw, 0, 0);
2551 }
2552 .timeline:not(.flat)
2553 > li.timeline-item-container:not(:has(.status-carousel)):has(
2554 + li .status-link.is-active
2555 ) {
2556 border-top-left-radius: var(--item-radius);
2557 }
2558 .timeline:not(.flat)
2559 > li.timeline-item-container:not(:has(.status-carousel)):has(
2560 .status-link.is-active
2561 )
2562 + li.timeline-item-container {
2563 border-bottom-left-radius: var(--item-radius);
2564 }
2565 .box {
2566 padding: 32px;
2567 }
2568 /* :is(.carousel-top-controls, .carousel-controls) {
2569 padding: 32px;
2570 } */
2571 li.timeline-item-carousel {
2572 width: 95vw;
2573 max-width: calc(320px * 3.3);
2574 transform: translateX(calc(-50% + var(--main-width) / 2));
2575 }
2576}