alice.mosphere.at
this repo has no description
1#compose-container-outer {
2 width: 100%;
3 height: 100vh;
4 height: 100dvh;
5 overflow: auto;
6 align-self: flex-start;
7 padding: env(safe-area-inset-top) env(safe-area-inset-right)
8 env(safe-area-inset-bottom) env(safe-area-inset-left);
9}
10#compose-container {
11 margin: auto;
12 width: var(--main-width);
13 max-width: 100%;
14 align-self: stretch;
15 animation: fade-in 0.2s ease-out;
16}
17
18#compose-container .compose-top {
19 display: flex;
20 justify-content: space-between;
21 gap: 8px;
22 align-items: center;
23 padding: 8px;
24 position: sticky;
25 top: 0;
26 z-index: 100;
27 white-space: nowrap;
28
29 @media (min-width: 480px) {
30 padding-block: 16px;
31 }
32
33 .compose-controls {
34 display: flex;
35 background-color: var(--bg-faded-blur-color);
36 backdrop-filter: blur(16px);
37 border-radius: 9999px;
38 border: 2px solid var(--bg-faded-color);
39
40 button:is(:hover, :focus) {
41 background-color: var(--bg-blur-color);
42 }
43 }
44}
45#compose-container .compose-top .account-block {
46 text-align: start;
47 pointer-events: none;
48 overflow: hidden;
49 color: var(--text-insignificant-color);
50 line-height: 1.1;
51 font-size: 90%;
52 background-color: var(--bg-faded-blur-color);
53 backdrop-filter: blur(16px);
54 padding-inline-end: 1em;
55 border-radius: 9999px;
56 border: 2px solid var(--bg-faded-color);
57}
58
59@keyframes appear-up {
60 0% {
61 opacity: 0;
62 transform: translateY(10px);
63 }
64 100% {
65 opacity: 1;
66 transform: translateY(0);
67 }
68}
69#compose-container .status-preview {
70 border-radius: 16px 16px 0 0;
71 max-height: 160px;
72 background-color: var(--bg-color);
73 margin: 0 8px;
74 border: 1px solid var(--outline-color);
75 border-bottom: 0;
76 animation: appear-up 1s ease-in-out;
77 overflow: auto;
78 box-shadow: 0 0px 12px -6px var(--drop-shadow-color);
79}
80#compose-container .status-preview:has(.status-badge:not(:empty)) {
81 border-start-end-radius: 8px;
82}
83#compose-container .status-preview :is(.content-container, .time) {
84 pointer-events: none;
85}
86#compose-container.standalone .status-preview * {
87 /*
88 For standalone mode (new window), prevent interacting with the status preview for now
89 */
90 pointer-events: none;
91}
92
93#compose-container .status-preview-legend {
94 pointer-events: none;
95 position: sticky;
96 bottom: 0;
97 padding: 8px;
98 font-size: 80%;
99 font-weight: bold;
100 text-align: center;
101 color: var(--text-insignificant-color);
102 background-color: var(--bg-blur-color);
103 /* background-image: linear-gradient(
104 to bottom,
105 transparent,
106 var(--bg-faded-color)
107 ); */
108 border-top: var(--hairline-width) solid var(--outline-color);
109 backdrop-filter: blur(8px);
110 text-shadow:
111 0 1px 10px var(--bg-color),
112 0 1px 10px var(--bg-color),
113 0 1px 10px var(--bg-color),
114 0 1px 10px var(--bg-color),
115 0 1px 10px var(--bg-color);
116 z-index: 2;
117
118 strong {
119 color: var(--red-color);
120 }
121}
122#_compose-container .status-preview-legend.reply-to {
123 color: var(--reply-to-color);
124 background-color: var(--reply-to-faded-color);
125 /* background-image: linear-gradient(
126 to bottom,
127 transparent,
128 var(--reply-to-faded-color)
129 ); */
130}
131
132#compose-container form {
133 --form-spacing-inline: 0;
134 --form-spacing-block: 8px;
135 padding: var(--form-spacing-block) var(--form-spacing-inline);
136 background-color: var(--bg-blur-color);
137 position: relative;
138 z-index: 2;
139 --drop-shadow: 0 3px 6px -4px var(--drop-shadow-color);
140 box-shadow: var(--drop-shadow);
141 display: flex;
142 flex-direction: column;
143 gap: var(--form-spacing-block);
144
145 @media (min-width: 40em) {
146 --form-spacing-inline: 8px;
147 border-radius: 16px;
148 border-start-start-radius: 8px;
149 border-start-end-radius: 8px;
150 }
151}
152#compose-container .status-preview ~ form {
153 box-shadow:
154 var(--drop-shadow),
155 0 -3px 6px -3px var(--drop-shadow-color);
156}
157
158#compose-container textarea {
159 width: 100%;
160 max-width: 100%;
161 line-height: 1.4;
162 border-color: transparent;
163
164 &:hover {
165 border-color: var(--divider-color);
166 }
167}
168
169#compose-container .compose-field {
170 width: 100%;
171 height: 4em;
172 min-height: 4em;
173 max-height: 50vh;
174 resize: vertical;
175 border-radius: 0;
176
177 @media (min-width: 40em) {
178 max-height: 65vh;
179 border-radius: 4px;
180 }
181}
182
183#compose-container .toolbar {
184 display: flex;
185 justify-content: space-between;
186 align-items: center;
187 gap: 4px;
188 padding-inline: 8px;
189
190 @media (min-width: 40em) {
191 padding-inline: 0;
192 }
193}
194#compose-container .toolbar.wrap {
195 flex-wrap: wrap;
196}
197#compose-container .toolbar.stretch {
198 justify-content: stretch;
199}
200#compose-container .toolbar-button {
201 display: inline-block;
202 color: var(--text-insignificant-color);
203 background-color: transparent;
204 padding: 0 8px;
205 border-radius: 8px;
206 min-height: 2.4em;
207 min-width: 2.6em;
208 text-align: center;
209 overflow: hidden;
210 position: relative;
211 border: 2px solid transparent;
212 vertical-align: middle;
213 align-content: center;
214 word-wrap: normal;
215 overflow: hidden;
216
217 &.active {
218 filter: brightness(0.8);
219 background-color: var(--bg-color);
220 }
221}
222#compose-container .toolbar-button > * {
223 vertical-align: middle;
224 cursor: inherit;
225 outline: 0;
226}
227#compose-container .toolbar-button:has([disabled]),
228#compose-container .toolbar-button[disabled] {
229 pointer-events: none;
230 background-color: transparent;
231 opacity: 0.5;
232}
233#compose-container
234 .toolbar-button
235 :is(input[type='checkbox'], select, input[type='file']) {
236 opacity: 0;
237 position: absolute;
238 inset: 0;
239 margin: 0;
240}
241#compose-container .toolbar-button input[type='file'] {
242 /* Move this out of the way, to fix cursor: pointer bug */
243 left: -100vw !important;
244}
245#compose-container .toolbar-button select {
246 background-color: inherit;
247 border: 0;
248 padding: 0 0 0 8px;
249 margin: 0;
250 appearance: none;
251 line-height: 1em;
252}
253#compose-container
254 .toolbar-button:not(:disabled):is(
255 :hover,
256 :focus,
257 :focus-within,
258 :focus-visible
259 ) {
260 cursor: pointer;
261 filter: none;
262 background-color: var(--bg-color);
263 border-color: var(--link-faded-color);
264 outline: 0;
265 color: var(--link-color);
266}
267#compose-container .toolbar-button:not(:disabled).highlight {
268 color: var(--text-color);
269 border-color: var(--link-faded-color);
270 background-color: var(--bg-blur-color);
271
272 &:where(:focus-within, :hover) {
273 background-color: var(--link-bg-color);
274 }
275}
276#compose-container .toolbar-button:not(:disabled):active {
277 filter: brightness(0.8);
278}
279
280#compose-container .toolbar-button .icon-text {
281 display: inline-block;
282 font-size: 14px;
283 text-overflow: ellipsis;
284 overflow: hidden;
285 max-width: 100%;
286 min-width: 4ch;
287 display: -webkit-box;
288 -webkit-box-orient: vertical;
289 -webkit-line-clamp: 2;
290 line-clamp: 2;
291}
292
293#compose-container .toolbar-divider {
294 width: 1px;
295 height: 100%;
296 margin: 0 var(--hairline-width);
297 background-image: linear-gradient(
298 to bottom,
299 transparent,
300 var(--divider-color),
301 transparent
302 );
303 flex-shrink: 0;
304}
305
306#compose-container .compose-footer {
307 .add-toolbar-button-group {
308 display: flex;
309 overflow: auto;
310 min-width: 42px;
311 }
312 .add-sub-toolbar-button-group {
313 flex-grow: 1;
314 display: flex;
315 overflow: auto;
316 transition: 0.5s ease-in-out;
317 transition-property: opacity, width;
318 scrollbar-width: none;
319 padding-inline-end: 16px;
320 mask-image: linear-gradient(
321 var(--to-backward),
322 transparent 0,
323 black 16px,
324 black 100%
325 );
326
327 &::-webkit-scrollbar {
328 display: none;
329 }
330
331 &[hidden] {
332 opacity: 0;
333 pointer-events: none;
334 width: 0;
335 }
336 }
337}
338
339#compose-container text-expander {
340 position: relative;
341 display: block;
342}
343#compose-container .text-expander-menu {
344 color: var(--text-color);
345 background-color: var(--bg-color);
346 position: absolute;
347 margin-top: 2em;
348 padding: 0;
349 list-style: none;
350 border: 1px solid var(--outline-color);
351 box-shadow: 0 4px 24px var(--drop-shadow-color);
352 border-radius: 8px;
353 overflow: hidden;
354 z-index: 100;
355 min-width: 10em;
356 max-width: 90vw;
357}
358#compose-container .text-expander-menu li {
359 white-space: nowrap;
360 padding: 8px;
361 cursor: pointer;
362 overflow: hidden;
363 text-overflow: ellipsis;
364 display: flex;
365 gap: 8px;
366 align-items: center;
367 font-size: 90%;
368
369 .grow {
370 flex-grow: 1;
371 }
372
373 .count {
374 font-size: 80%;
375 opacity: 0.5;
376 }
377}
378#compose-container .text-expander-menu li b img {
379 /* The shortcode emojis */
380 width: 0.9em;
381 height: 0.9em;
382}
383#compose-container .text-expander-menu li .avatar {
384 width: 2.2em;
385 height: 2.2em;
386}
387#compose-container .text-expander-menu li:is(:hover, :focus, [aria-selected]) {
388 background-color: var(--link-bg-color);
389 color: var(--text-color);
390}
391#compose-container .text-expander-menu li[aria-selected] {
392 box-shadow: inset 4px 0 0 0 var(--button-bg-color);
393 :dir(rtl) & {
394 box-shadow: inset -4px 0 0 0 var(--button-bg-color);
395 }
396}
397#compose-container .text-expander-menu li[data-more] {
398 &:not(:hover, :focus, [aria-selected]) {
399 color: var(--text-insignificant-color);
400 background-color: var(--bg-faded-color);
401 }
402
403 font-size: 0.8em;
404 justify-content: center;
405}
406
407#compose-container .form-visibility-direct {
408 --yellow-stripes: repeating-linear-gradient(
409 135deg,
410 var(--reply-to-faded-color),
411 var(--reply-to-faded-color) 10px,
412 var(--reply-to-faded-color) 10px,
413 transparent 10px,
414 transparent 20px
415 );
416 /* diagonal stripes of yellow */
417 background-image: var(--yellow-stripes);
418}
419
420#compose-container .media-attachments {
421 background-color: var(--bg-faded-blur-color);
422 padding: 8px;
423 /* margin: 8px 0 0; */
424 display: flex;
425 flex-direction: column;
426 gap: 8px;
427
428 @media (min-width: 40em) {
429 border-radius: 8px;
430 }
431}
432#compose-container .media-attachment {
433 display: flex;
434 gap: 8px;
435 align-items: stretch;
436
437 .media-error {
438 padding: 2px;
439 color: var(--orange-fg-color);
440 background-color: transparent;
441 border: 1.5px dashed transparent;
442 line-height: 1;
443 border-radius: 4px;
444 display: flex;
445
446 &:is(:hover, :focus) {
447 background-color: var(--bg-color);
448 border-color: var(--orange-fg-color);
449 }
450 }
451}
452#compose-container .media-preview {
453 flex-shrink: 0;
454 border: 1px solid var(--outline-color);
455 border-radius: 4px;
456 overflow: hidden;
457 width: 80px;
458 height: 80px;
459 /* checkerboard background */
460 background-image:
461 linear-gradient(45deg, var(--img-bg-color) 25%, transparent 25%),
462 linear-gradient(-45deg, var(--img-bg-color) 25%, transparent 25%),
463 linear-gradient(45deg, transparent 75%, var(--img-bg-color) 75%),
464 linear-gradient(-45deg, transparent 75%, var(--img-bg-color) 75%);
465 background-size: 10px 10px;
466 background-position:
467 0 0,
468 0 5px,
469 5px -5px,
470 -5px 0px;
471}
472#compose-container .media-preview > * {
473 width: 80px;
474 height: 80px;
475 object-fit: scale-down;
476 vertical-align: middle;
477 pointer-events: none;
478}
479#compose-container .media-preview:hover {
480 box-shadow: 0 0 0 2px var(--link-light-color);
481 cursor: pointer;
482}
483#compose-container .media-attachment textarea {
484 height: 80px;
485 flex-grow: 1;
486 resize: none;
487}
488#compose-container .media-attachments .media-desc {
489 flex-grow: 1;
490}
491#compose-container .media-attachments .media-desc p {
492 font-size: 90%;
493 margin: 0;
494 padding: 0;
495 /* clamp 2 lines */
496 display: -webkit-box;
497 -webkit-line-clamp: 2;
498 -webkit-box-orient: vertical;
499 overflow: hidden;
500}
501#compose-container .media-attachments .media-desc p i {
502 color: var(--text-insignificant-color);
503}
504#compose-container .media-aside {
505 display: flex;
506 flex-direction: column;
507 justify-content: space-between;
508 align-items: center;
509}
510#compose-container .media-aside .uploaded {
511 color: var(--green-color);
512 margin-bottom: 4px;
513}
514
515#compose-container form .close-button {
516 padding: 4px;
517 align-self: center;
518 color: var(--text-insignificant-color);
519
520 &:is(:hover, :focus) {
521 color: var(--text-color);
522 background-color: var(--bg-color);
523 }
524}
525
526#compose-container .media-sensitive {
527 padding: 8px;
528 background-color: var(--bg-blur-color);
529 border-radius: 8px;
530 cursor: pointer;
531}
532#compose-container .media-sensitive > * {
533 vertical-align: middle;
534}
535
536#compose-container form .poll {
537 background-color: var(--bg-faded-blur-color);
538 background-image: none;
539 box-shadow: none;
540 border: 0;
541 margin: 0;
542 display: block;
543 border-radius: 0;
544
545 @media (min-width: 40em) {
546 border-radius: 8px;
547 }
548}
549
550#compose-container .poll-choices {
551 display: flex;
552 flex-direction: column;
553 gap: 8px;
554 padding: 8px;
555}
556#compose-container .poll-choice {
557 display: flex;
558 gap: 8px;
559 align-items: center;
560 justify-content: stretch;
561 flex-direction: row-reverse;
562}
563#compose-container .poll-choice .poll-field-container {
564 flex-grow: 1;
565 min-width: 0;
566
567 input {
568 width: 100%;
569 }
570}
571
572#compose-container .poll-button {
573 border: 2px solid var(--outline-color);
574 width: 28px;
575 height: 28px;
576 padding: 0;
577 flex-shrink: 0;
578 line-height: 0;
579 overflow: hidden;
580 transition: border-radius 0.5s ease-out;
581 font-size: 14px;
582}
583#compose-container .multiple .poll-button {
584 border-radius: 4px;
585}
586
587#compose-container .poll-toolbar {
588 display: flex;
589 gap: 8px;
590 align-items: stretch;
591 justify-content: space-between;
592 font-size: 90%;
593 border-top: 1px solid var(--bg-color);
594 padding: 8px;
595}
596#compose-container .poll-toolbar select {
597 padding: 4px;
598}
599
600#compose-container .poll-config {
601 flex-grow: 1;
602 display: flex;
603 flex-direction: row;
604 column-gap: 8px;
605 row-gap: 4px;
606 align-items: center;
607 flex-wrap: wrap;
608}
609
610#compose-container .multiple-choices {
611 display: flex;
612 gap: 4px;
613 align-items: center;
614 padding: 8px;
615 background-color: var(--bg-blur-color);
616 border-radius: 8px;
617 width: fit-content;
618}
619
620#compose-container .expires-in {
621 display: flex;
622 gap: 8px;
623 flex-wrap: wrap;
624 align-items: center;
625 padding: 3px;
626 padding-inline-start: 8px;
627 background-color: var(--bg-blur-color);
628 border-radius: 8px;
629 width: fit-content;
630}
631
632#compose-container {
633 .scheduled-at {
634 background-color: var(--bg-faded-blur-color);
635 padding: 8px;
636
637 @media (min-width: 40em) {
638 border-radius: 8px;
639 }
640
641 input[type='datetime-local'] {
642 max-width: 80vw;
643 padding: 4px;
644
645 &:invalid {
646 border-color: var(--red-color);
647 }
648 }
649 }
650}
651
652.compose-menu-add-media {
653 position: relative;
654
655 .compose-menu-add-media-field {
656 position: absolute;
657 inset: 0;
658 opacity: 0;
659 cursor: inherit;
660 }
661}
662
663.icon-gif {
664 display: inline-block !important;
665 min-width: 16px;
666 height: 16px;
667 font-size: 10px !important;
668 letter-spacing: -0.5px;
669 font-size-adjust: none;
670 overflow: hidden;
671 white-space: nowrap;
672 text-align: center;
673 line-height: 16px;
674 font-weight: bold;
675 text-rendering: optimizeSpeed;
676
677 &:after {
678 display: block;
679 content: 'GIF';
680 }
681}
682
683@media (display-mode: standalone) {
684 /* No popping in standalone mode */
685 #compose-container .pop-button {
686 display: none;
687 }
688}
689
690#compose-container button[type='submit'] {
691 border-radius: 9px;
692 align-self: stretch;
693
694 /* @media (min-width: 480px) {
695 padding-inline: 24px;
696 font-size: 125%;
697 } */
698}
699
700@keyframes breathe {
701 0% {
702 opacity: 1;
703 }
704 40% {
705 opacity: 0.4;
706 }
707 100% {
708 opacity: 1;
709 }
710}
711
712#media-sheet {
713 .media-form {
714 flex: 1;
715 display: flex;
716 flex-direction: column;
717 gap: 8px;
718 min-height: 50vh;
719
720 textarea {
721 flex-grow: 1;
722 resize: none;
723 width: 100%;
724 /* height: 10em; */
725
726 &.loading {
727 animation: skeleton-breathe 1.5s linear infinite;
728 }
729 }
730
731 footer {
732 display: flex;
733 justify-content: space-between;
734 align-items: center;
735 }
736 }
737}
738#media-sheet main {
739 padding-top: 8px;
740 display: flex;
741 flex-direction: column;
742 flex: 1;
743 gap: 8px;
744}
745#media-sheet .media-preview {
746 border: 2px solid var(--outline-color);
747 border-radius: 8px;
748 overflow: hidden;
749 box-shadow: 0 2px 16px var(--img-bg-color);
750 /* checkerboard background */
751 background-image:
752 linear-gradient(45deg, var(--img-bg-color) 25%, transparent 25%),
753 linear-gradient(-45deg, var(--img-bg-color) 25%, transparent 25%),
754 linear-gradient(45deg, transparent 75%, var(--img-bg-color) 75%),
755 linear-gradient(-45deg, transparent 75%, var(--img-bg-color) 75%);
756 background-size: 20px 20px;
757 background-position:
758 0 0,
759 0 10px,
760 10px -10px,
761 -10px 0px;
762 flex: 0.8;
763}
764#media-sheet .media-preview > * {
765 width: 100%;
766 height: 100%;
767 max-height: 50vh;
768 object-fit: scale-down;
769 vertical-align: middle;
770}
771
772@media (min-width: 50em) {
773 #media-sheet main {
774 flex-direction: row;
775 }
776 #media-sheet .media-preview {
777 flex: 2;
778 }
779 #media-sheet .media-preview > * {
780 max-height: none;
781 }
782 /* #media-sheet textarea {
783 flex: 1;
784 min-height: 100%;
785 height: auto;
786 } */
787}
788
789#mention-sheet {
790 height: 50vh;
791
792 .accounts-list {
793 --list-gap: 1px;
794 list-style: none;
795 margin: 0;
796 padding: 8px 0;
797 display: flex;
798 flex-direction: column;
799 row-gap: var(--list-gap);
800
801 &.loading {
802 opacity: 0.5;
803 }
804
805 li {
806 display: flex;
807 flex-grow: 1;
808 /* align-items: center; */
809 margin: 0 -8px;
810 padding: 8px;
811 gap: 8px;
812 position: relative;
813 justify-content: space-between;
814 border-radius: 8px;
815 /* align-items: center; */
816
817 &:hover {
818 background-image: linear-gradient(
819 var(--to-forward),
820 transparent 75%,
821 var(--link-bg-color)
822 );
823 }
824
825 &.selected {
826 background-image: linear-gradient(
827 var(--to-forward),
828 var(--bg-faded-color) 75%,
829 var(--link-bg-color)
830 );
831 }
832
833 &:before {
834 content: '';
835 display: block;
836 border-top: var(--hairline-width) solid var(--divider-color);
837 position: absolute;
838 bottom: 0;
839 inset-inline-start: 58px;
840 inset-inline-end: 0;
841 }
842
843 &:has(+ li:is(.selected, :hover)):before,
844 &:is(.selected, :hover):before {
845 opacity: 0;
846 }
847
848 > button {
849 border-radius: 4px;
850 &:hover {
851 outline: 2px solid var(--button-bg-blur-color);
852 }
853 }
854 }
855 }
856}
857
858#custom-emojis-sheet {
859 max-height: 50vh;
860 max-height: 50dvh;
861
862 header {
863 .loader-container {
864 margin: 0;
865 }
866
867 form {
868 margin: 8px 0 0;
869
870 input {
871 width: 100%;
872 min-width: 0;
873 }
874 }
875 }
876
877 main {
878 mask-image: none;
879 min-height: 40vh;
880 padding-bottom: 88px;
881 }
882
883 .custom-emojis-matches {
884 margin: 0;
885 padding: 0;
886 list-style: none;
887 display: flex;
888 flex-wrap: wrap;
889 }
890
891 .custom-emojis-list {
892 .section-container {
893 position: relative;
894 content-visibility: auto;
895 content-intrinsic-size: auto 88px;
896 }
897 .section-header {
898 font-size: 80%;
899 text-transform: uppercase;
900 color: var(--text-insignificant-color);
901 padding: 8px 0 4px;
902 position: sticky;
903 top: 0;
904 background-color: var(--bg-color);
905 z-index: 1;
906 display: inline-block;
907 padding-inline-end: 8px;
908 pointer-events: none;
909 border-end-end-radius: 8px;
910 }
911 section {
912 display: flex;
913 flex-wrap: wrap;
914 }
915 button {
916 color: var(--text-color);
917 border-radius: 8px;
918 background-image: radial-gradient(
919 closest-side,
920 var(--img-bg-color),
921 transparent
922 );
923 text-shadow: 0 1px 0 var(--bg-color);
924 position: relative;
925 min-width: 44px;
926 min-height: 44px;
927 font-variant-numeric: slashed-zero;
928 font-feature-settings: 'ss01';
929
930 &[data-title]:after {
931 max-width: 50vw;
932 pointer-events: none;
933 position: absolute;
934 content: attr(data-title);
935 left: 50%;
936 top: 0;
937 background-color: var(--bg-color);
938 padding: 2px 4px;
939 border-radius: 4px;
940 font-size: 12px;
941 border: 1px solid var(--text-color);
942 transform: translate(-50%, -110%);
943 opacity: 0;
944 transition: opacity 0.1s ease-out 0.1s;
945 font-family: var(--monospace-font);
946 line-height: 1;
947 }
948 &.edge-left[data-title]:after {
949 left: 0;
950 transform: translate(0, -110%);
951 }
952 &.edge-right[data-title]:after {
953 left: 100%;
954 transform: translate(-100%, -110%);
955 }
956
957 &:is(:hover, :focus) {
958 z-index: 1;
959 filter: none;
960 background-color: var(--bg-faded-color);
961
962 &[data-title]:after {
963 opacity: 1;
964 }
965 }
966
967 img {
968 transition: transform 0.1s ease-out;
969 }
970
971 &:is(:hover, :focus) img {
972 transform: scale(2);
973 }
974 &.edge-left img {
975 transform-origin: left center;
976 }
977 &.edge-right img {
978 transform-origin: right center;
979 }
980
981 code {
982 font-size: 0.8em;
983 }
984 }
985 }
986}
987
988.compose-cw-container {
989 display: flex;
990
991 &.collapsed {
992 display: none;
993 }
994
995 &:not(.collapsed) {
996 .spoiler-text-field-container {
997 flex: 1;
998 min-width: 0;
999 border-bottom: 2px dashed var(--divider-color);
1000
1001 .spoiler-text-field {
1002 width: 100%;
1003 padding-inline-end: calc(24px + 8px);
1004 border-color: transparent;
1005 border-radius: 0;
1006
1007 &:hover {
1008 border-color: var(--divider-color);
1009 border-style: solid;
1010 }
1011
1012 @media (max-width: 40em) {
1013 outline-offset: -2px;
1014 }
1015
1016 @media (min-width: 40em) {
1017 border-start-start-radius: 4px;
1018 border-start-end-radius: 4px;
1019 }
1020 }
1021
1022 + button {
1023 position: absolute;
1024 inset-inline-end: 8px;
1025
1026 @media (min-width: 40em) {
1027 inset-inline-end: 16px;
1028 }
1029 }
1030 }
1031
1032 + .compose-field-container .compose-field {
1033 border-start-start-radius: 0 !important;
1034 border-start-end-radius: 0 !important;
1035 }
1036 }
1037}
1038
1039.compose-field-container {
1040 display: grid !important;
1041
1042 @media (max-width: 40em) {
1043 .compose-field {
1044 outline-offset: -2px;
1045 }
1046 }
1047
1048 &.debug {
1049 grid-template-columns: 1fr 1fr;
1050 }
1051
1052 > .compose-field,
1053 > .compose-highlight {
1054 grid-area: 1 / 1 / 2 / 2;
1055 }
1056
1057 .compose-highlight {
1058 user-drag: none;
1059 user-select: none;
1060 pointer-events: none;
1061 touch-action: none;
1062 padding: 8px;
1063 color: transparent;
1064 background-color: transparent;
1065 border: 2px solid transparent;
1066 line-height: 1.4;
1067 overflow: auto;
1068 unicode-bidi: plaintext;
1069 -webkit-rtl-ordering: logical;
1070 rtl-ordering: logical;
1071 overflow-wrap: break-word;
1072 white-space: pre-wrap;
1073 min-height: 4em;
1074 max-height: 50vh;
1075 scrollbar-width: none;
1076
1077 &::-webkit-scrollbar {
1078 display: none;
1079 }
1080
1081 /* Follow textarea styles */
1082 @media (min-width: 40em) {
1083 max-height: 65vh;
1084 }
1085
1086 mark {
1087 color: inherit;
1088 }
1089
1090 .compose-highlight-url,
1091 .compose-highlight-hashtag {
1092 background-color: transparent;
1093 text-decoration: underline;
1094 text-decoration-color: var(--link-faded-color);
1095 text-decoration-thickness: 2px;
1096 text-underline-offset: 2px;
1097 }
1098 .compose-highlight-mention,
1099 .compose-highlight-emoji-shortcode,
1100 .compose-highlight-exceeded {
1101 mix-blend-mode: multiply;
1102 border-radius: 4px;
1103 box-shadow: 0 0 0 1px;
1104 }
1105 .compose-highlight-mention {
1106 background-color: var(--orange-light-bg-color);
1107 box-shadow-color: var(--orange-light-bg-color);
1108 }
1109 .compose-highlight-emoji-shortcode {
1110 background-color: var(--bg-faded-color);
1111 box-shadow-color: var(--bg-faded-color);
1112 }
1113 .compose-highlight-exceeded {
1114 background-color: var(--red-bg-color);
1115 box-shadow-color: var(--red-bg-color);
1116 }
1117
1118 @media (prefers-color-scheme: dark) {
1119 .compose-highlight-mention,
1120 .compose-highlight-emoji-shortcode,
1121 .compose-highlight-exceeded {
1122 mix-blend-mode: screen;
1123 }
1124 }
1125 }
1126}
1127
1128@keyframes gif-shake {
1129 0% {
1130 transform: rotate(0deg);
1131 }
1132 25% {
1133 transform: rotate(5deg);
1134 }
1135 50% {
1136 transform: rotate(0deg);
1137 }
1138 75% {
1139 transform: rotate(-5deg);
1140 }
1141 100% {
1142 transform: rotate(0deg);
1143 }
1144}
1145
1146@keyframes jump-scare {
1147 from {
1148 opacity: 0.5;
1149 transform: scale(0.25) translateX(80px);
1150 }
1151 to {
1152 opacity: 1;
1153 transform: scale(1) translateX(0);
1154 }
1155}
1156@keyframes jump-scare-rtl {
1157 from {
1158 opacity: 0.5;
1159 transform: scale(0.25) translateX(-80px);
1160 }
1161 to {
1162 opacity: 1;
1163 transform: scale(1) translateX(0);
1164 }
1165}
1166
1167.add-button {
1168 transform-origin: var(--forward) center;
1169 background-color: var(--bg-color) !important;
1170 animation: jump-scare 0.2s ease-in-out both;
1171 :dir(rtl) & {
1172 animation-name: jump-scare-rtl;
1173 }
1174
1175 .icon {
1176 transition: transform 0.3s ease-in-out;
1177 }
1178 &.active {
1179 .icon {
1180 transform: rotate(135deg);
1181 }
1182 }
1183}
1184
1185.gif-picker-button {
1186 /* span {
1187 font-weight: bold;
1188 font-size: 11.5px;
1189 display: block;
1190 line-height: 1;
1191 } */
1192
1193 &:is(:hover, :focus) {
1194 .icon {
1195 animation: gif-shake 0.3s 3;
1196 }
1197 }
1198}
1199
1200#gif-picker-sheet {
1201 height: 50vh;
1202
1203 form {
1204 display: flex;
1205 flex-direction: row;
1206 gap: 8px;
1207 align-items: center;
1208
1209 input[type='search'] {
1210 flex-grow: 1;
1211 min-width: 0;
1212 }
1213 }
1214
1215 main {
1216 overflow-x: auto;
1217 overflow-y: hidden;
1218 mask-image: linear-gradient(
1219 var(--to-forward),
1220 transparent 2px,
1221 black 16px,
1222 black calc(100% - 16px),
1223 transparent calc(100% - 2px)
1224 );
1225
1226 @media (min-height: 480px) {
1227 overflow-y: auto;
1228 max-height: 50vh;
1229 }
1230
1231 &.loading {
1232 opacity: 0.25;
1233 }
1234
1235 .ui-state {
1236 min-height: 100px;
1237 }
1238
1239 ul {
1240 min-height: 100px;
1241 display: flex;
1242 gap: 4px;
1243 list-style: none;
1244 padding: 8px 2px;
1245 margin: 0;
1246
1247 @media (min-height: 480px) {
1248 display: grid;
1249 grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
1250 grid-auto-rows: 1fr;
1251 }
1252
1253 li {
1254 list-style: none;
1255 padding: 0;
1256 margin: 0;
1257 max-width: 100%;
1258 display: flex;
1259
1260 button {
1261 padding: 4px;
1262 margin: 0;
1263 border: none;
1264 background-color: transparent;
1265 color: inherit;
1266 cursor: pointer;
1267 border-radius: 8px;
1268 background-color: var(--bg-faded-color);
1269
1270 @media (min-height: 480px) {
1271 width: 100%;
1272 text-align: center;
1273 }
1274
1275 &:is(:hover, :focus) {
1276 background-color: var(--link-bg-color);
1277 box-shadow: 0 0 0 2px var(--link-light-color);
1278 filter: none;
1279 }
1280 }
1281
1282 figure {
1283 margin: 0;
1284 padding: 0;
1285 width: var(--figure-width);
1286 max-width: 100%;
1287
1288 @media (min-height: 480px) {
1289 width: 100%;
1290 text-align: center;
1291 }
1292
1293 figcaption {
1294 font-size: 0.8em;
1295 padding: 2px;
1296 overflow: hidden;
1297 white-space: nowrap;
1298 text-overflow: ellipsis;
1299 color: var(--text-insignificant-color);
1300 }
1301 }
1302
1303 img {
1304 background-color: var(--img-bg-color);
1305 border-radius: 4px;
1306 vertical-align: top;
1307 object-fit: contain;
1308 }
1309 }
1310 }
1311
1312 .pagination {
1313 display: flex;
1314 justify-content: space-between;
1315 gap: 8px;
1316 padding: 0;
1317 margin: 0;
1318 position: sticky;
1319 bottom: 0;
1320 left: 0;
1321 right: 0;
1322
1323 @media (min-height: 480px) {
1324 position: static;
1325 }
1326 }
1327 }
1328}