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: 100vw;
14 align-self: stretch;
15 animation: fade-in 0.2s ease-out;
16}
17
18#compose-container .compose-top {
19 text-align: right;
20 display: flex;
21 justify-content: space-between;
22 gap: 8px;
23 align-items: center;
24 padding: 16px;
25 position: sticky;
26 top: 0;
27 z-index: 100;
28 white-space: nowrap;
29}
30#compose-container .compose-top .account-block {
31 text-align: start;
32 pointer-events: none;
33 overflow: hidden;
34 color: var(--text-insignificant-color);
35 line-height: 1.1;
36 font-size: 90%;
37 background-color: var(--bg-faded-blur-color);
38 backdrop-filter: blur(16px);
39 padding-inline-end: 1em;
40 border-radius: 9999px;
41}
42
43@keyframes appear-up {
44 0% {
45 opacity: 0;
46 transform: translateY(10px);
47 }
48 100% {
49 opacity: 1;
50 transform: translateY(0);
51 }
52}
53#compose-container .status-preview {
54 border-radius: 16px 16px 0 0;
55 max-height: 160px;
56 background-color: var(--bg-color);
57 margin: 0 12px;
58 border: 1px solid var(--outline-color);
59 border-bottom: 0;
60 animation: appear-up 1s ease-in-out;
61 overflow: auto;
62 box-shadow: 0 -3px 12px -3px var(--drop-shadow-color);
63}
64#compose-container .status-preview:has(.status-badge:not(:empty)) {
65 border-top-right-radius: 8px;
66}
67#compose-container .status-preview :is(.content-container, .time) {
68 pointer-events: none;
69}
70#compose-container.standalone .status-preview * {
71 /*
72 For standalone mode (new window), prevent interacting with the status preview for now
73 */
74 pointer-events: none;
75}
76
77#compose-container .status-preview-legend {
78 pointer-events: none;
79 position: sticky;
80 bottom: 0;
81 padding: 8px;
82 font-size: 80%;
83 font-weight: bold;
84 text-align: center;
85 color: var(--text-insignificant-color);
86 background-color: var(--bg-blur-color);
87 /* background-image: linear-gradient(
88 to bottom,
89 transparent,
90 var(--bg-faded-color)
91 ); */
92 border-top: var(--hairline-width) solid var(--outline-color);
93 backdrop-filter: blur(8px);
94 text-shadow: 0 1px 10px var(--bg-color), 0 1px 10px var(--bg-color),
95 0 1px 10px var(--bg-color), 0 1px 10px var(--bg-color),
96 0 1px 10px var(--bg-color);
97 z-index: 2;
98}
99#_compose-container .status-preview-legend.reply-to {
100 color: var(--reply-to-color);
101 background-color: var(--reply-to-faded-color);
102 /* background-image: linear-gradient(
103 to bottom,
104 transparent,
105 var(--reply-to-faded-color)
106 ); */
107}
108
109#compose-container form {
110 --form-padding-inline: 12px;
111 --form-padding-block: 8px;
112 /* border-radius: 16px; */
113 padding: var(--form-padding-block) var(--form-padding-inline);
114 background-color: var(--bg-blur-color);
115 /* background-image: linear-gradient(var(--bg-color) 85%, transparent); */
116 position: relative;
117 z-index: 2;
118 --drop-shadow: 0 3px 6px -3px var(--drop-shadow-color);
119 box-shadow: var(--drop-shadow);
120
121 @media (min-width: 40em) {
122 border-radius: 16px;
123 }
124}
125#compose-container .status-preview ~ form {
126 box-shadow: var(--drop-shadow), 0 -3px 6px -3px var(--drop-shadow-color);
127}
128
129#compose-container textarea {
130 width: 100%;
131 max-width: 100%;
132 height: 5em;
133 min-height: 5em;
134 max-height: 50vh;
135 resize: vertical;
136 line-height: 1.4;
137 border-color: transparent;
138
139 &.compose-field {
140 @media (min-width: 40em) {
141 max-height: 65vh;
142 }
143 }
144}
145#compose-container textarea:hover {
146 border-color: var(--divider-color);
147}
148
149#compose-container .toolbar {
150 display: flex;
151 justify-content: space-between;
152 align-items: center;
153 padding: 8px 0;
154 gap: 8px;
155}
156#compose-container .toolbar.wrap {
157 flex-wrap: wrap;
158}
159#compose-container .toolbar.stretch {
160 justify-content: stretch;
161}
162#compose-container .toolbar .spoiler-text-field {
163 flex: 1;
164 min-width: 0;
165}
166#compose-container .toolbar-button {
167 display: inline-block;
168 color: var(--link-color);
169 background-color: transparent;
170 padding: 0 8px;
171 border-radius: 8px;
172 min-height: 2.4em;
173 line-height: 2.4em;
174 min-width: 2.6em;
175 text-align: center;
176 overflow: hidden;
177 position: relative;
178 white-space: nowrap;
179 border: 2px solid transparent;
180 vertical-align: middle;
181}
182#compose-container .toolbar-button > * {
183 vertical-align: middle;
184 cursor: inherit;
185 outline: 0;
186}
187#compose-container .toolbar-button:has([disabled]),
188#compose-container .toolbar-button[disabled] {
189 pointer-events: none;
190 background-color: transparent;
191 opacity: 0.5;
192}
193#compose-container
194 .toolbar-button:not(.show-field)
195 :is(input[type='checkbox'], select, input[type='file']) {
196 opacity: 0;
197 position: absolute;
198 left: 0;
199 height: 100%;
200 margin: 0;
201}
202#compose-container .toolbar-button input[type='file'] {
203 /* Move this out of the way, to fix cursor: pointer bug */
204 left: -100vw !important;
205}
206#compose-container .toolbar-button select {
207 background-color: transparent;
208 border: 0;
209 padding: 0 0 0 8px;
210 margin: 0;
211 appearance: none;
212 line-height: 1em;
213}
214#compose-container .toolbar-button:not(.show-field) select {
215 right: 0;
216 left: auto !important;
217}
218#compose-container
219 .toolbar-button:not(:disabled):is(
220 :hover,
221 :focus,
222 :focus-within,
223 :focus-visible
224 ) {
225 cursor: pointer;
226 filter: none;
227 background-color: var(--bg-color);
228 border-color: var(--link-faded-color);
229 outline: 0;
230}
231#compose-container .toolbar-button:not(:disabled).highlight {
232 border-color: var(--link-color);
233 box-shadow: inset 0 0 8px var(--link-faded-color);
234}
235#compose-container .toolbar-button:not(:disabled):active {
236 filter: brightness(0.8);
237}
238
239#compose-container .toolbar-button .icon-text {
240 display: inline-block;
241 font-size: 14px;
242 font-weight: 500;
243 text-overflow: ellipsis;
244 overflow: hidden;
245 max-width: 100%;
246}
247
248#compose-container text-expander {
249 position: relative;
250 display: block;
251}
252#compose-container .text-expander-menu {
253 color: var(--text-color);
254 background-color: var(--bg-color);
255 position: absolute;
256 margin-top: 2em;
257 padding: 0;
258 list-style: none;
259 border: 1px solid var(--outline-color);
260 box-shadow: 0 4px 24px var(--drop-shadow-color);
261 border-radius: 8px;
262 overflow: hidden;
263 z-index: 100;
264 min-width: 10em;
265 max-width: 90vw;
266}
267#compose-container .text-expander-menu li {
268 white-space: nowrap;
269 padding: 8px;
270 cursor: pointer;
271 overflow: hidden;
272 text-overflow: ellipsis;
273 display: flex;
274 gap: 8px;
275 align-items: center;
276 font-size: 90%;
277
278 .grow {
279 flex-grow: 1;
280 }
281
282 .count {
283 font-size: 80%;
284 opacity: 0.5;
285 }
286}
287#compose-container .text-expander-menu li b img {
288 /* The shortcode emojis */
289 width: 0.9em;
290 height: 0.9em;
291}
292#compose-container .text-expander-menu li .avatar {
293 width: 2.2em;
294 height: 2.2em;
295}
296#compose-container .text-expander-menu li:is(:hover, :focus, [aria-selected]) {
297 color: var(--bg-color);
298 background-color: var(--link-color);
299}
300#compose-container
301 .text-expander-menu:hover
302 li[aria-selected]:not(:hover, :focus) {
303 color: var(--text-color);
304 background-color: var(--bg-color);
305}
306
307#compose-container .form-visibility-direct {
308 --yellow-stripes: repeating-linear-gradient(
309 -45deg,
310 var(--reply-to-faded-color),
311 var(--reply-to-faded-color) 10px,
312 var(--reply-to-faded-color) 10px,
313 transparent 10px,
314 transparent 20px
315 );
316 /* diagonal stripes of yellow */
317 background-image: var(--yellow-stripes);
318}
319
320#compose-container .media-attachments {
321 background-color: var(--bg-faded-color);
322 padding: 8px;
323 border-radius: 8px;
324 margin: 8px 0 0;
325 display: flex;
326 flex-direction: column;
327 gap: 8px;
328}
329#compose-container .media-attachment {
330 display: flex;
331 gap: 8px;
332 align-items: stretch;
333}
334#compose-container .media-preview {
335 flex-shrink: 0;
336 border: 1px solid var(--outline-color);
337 border-radius: 4px;
338 overflow: hidden;
339 width: 80px;
340 height: 80px;
341 /* checkerboard background */
342 background-image: linear-gradient(
343 45deg,
344 var(--img-bg-color) 25%,
345 transparent 25%
346 ),
347 linear-gradient(-45deg, var(--img-bg-color) 25%, transparent 25%),
348 linear-gradient(45deg, transparent 75%, var(--img-bg-color) 75%),
349 linear-gradient(-45deg, transparent 75%, var(--img-bg-color) 75%);
350 background-size: 10px 10px;
351 background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
352}
353#compose-container .media-preview > * {
354 width: 80px;
355 height: 80px;
356 object-fit: scale-down;
357 vertical-align: middle;
358 pointer-events: none;
359}
360#compose-container .media-preview:hover {
361 box-shadow: 0 0 0 2px var(--link-light-color);
362 cursor: pointer;
363}
364#compose-container .media-attachment textarea {
365 height: 80px;
366 flex-grow: 1;
367 resize: none;
368}
369#compose-container .media-attachments .media-desc {
370 flex-grow: 1;
371}
372#compose-container .media-attachments .media-desc p {
373 font-size: 90%;
374 margin: 0;
375 padding: 0;
376 /* clamp 2 lines */
377 display: -webkit-box;
378 -webkit-line-clamp: 2;
379 -webkit-box-orient: vertical;
380 overflow: hidden;
381}
382#compose-container .media-attachments .media-desc p i {
383 color: var(--text-insignificant-color);
384}
385#compose-container .media-aside {
386 display: flex;
387 flex-direction: column;
388 justify-content: space-between;
389 align-items: center;
390}
391#compose-container .media-aside .close-button {
392 padding: 4px;
393 align-self: flex-start;
394 color: var(--text-insignificant-color);
395}
396#compose-container .media-aside .close-button:is(:hover, :focus) {
397 color: var(--text-color);
398}
399#compose-container .media-aside .uploaded {
400 color: var(--green-color);
401 margin-bottom: 4px;
402}
403
404#compose-container .media-sensitive {
405 padding: 8px;
406 background-color: var(--bg-blur-color);
407 border-radius: 8px;
408 cursor: pointer;
409}
410#compose-container .media-sensitive > * {
411 vertical-align: middle;
412}
413
414#compose-container form .poll {
415 background-color: var(--bg-faded-color);
416 border-radius: 8px;
417 margin: 8px 0 0;
418 display: block;
419}
420
421#compose-container .poll-choices {
422 display: flex;
423 flex-direction: column;
424 gap: 8px;
425 padding: 8px;
426}
427#compose-container .poll-choice {
428 display: flex;
429 gap: 8px;
430 align-items: center;
431 justify-content: stretch;
432 flex-direction: row-reverse;
433}
434#compose-container .poll-choice input {
435 flex-grow: 1;
436 min-width: 0;
437}
438
439#compose-container .poll-button {
440 border: 2px solid var(--outline-color);
441 width: 28px;
442 height: 28px;
443 padding: 0;
444 flex-shrink: 0;
445 line-height: 0;
446 overflow: hidden;
447 transition: border-radius 1s ease-out;
448 font-size: 14px;
449}
450#compose-container .multiple .poll-button {
451 border-radius: 4px;
452}
453
454#compose-container .poll-toolbar {
455 display: flex;
456 gap: 8px;
457 align-items: stretch;
458 justify-content: space-between;
459 font-size: 90%;
460 border-top: 1px solid var(--outline-color);
461 padding: 8px;
462}
463#compose-container .poll-toolbar select {
464 padding: 4px;
465}
466
467#compose-container .multiple-choices {
468 flex-grow: 1;
469 display: flex;
470 gap: 4px;
471 align-items: center;
472 border-left: 1px solid var(--outline-color);
473 padding-left: 8px;
474}
475
476#compose-container .expires-in {
477 flex-grow: 1;
478 border-left: 1px solid var(--outline-color);
479 padding-left: 8px;
480 display: flex;
481 gap: 4px;
482 flex-wrap: wrap;
483 align-items: center;
484 justify-content: flex-end;
485}
486
487#compose-container .remove-poll-button {
488 width: 100%;
489 color: var(--red-color);
490}
491
492@media (display-mode: standalone) {
493 /* No popping in standalone mode */
494 #compose-container .pop-button {
495 display: none;
496 }
497}
498
499@media (min-width: 480px) {
500 #compose-container button[type='submit'] {
501 padding-inline: 24px;
502 }
503}
504
505@keyframes breathe {
506 0% {
507 opacity: 1;
508 }
509 40% {
510 opacity: 0.4;
511 }
512 100% {
513 opacity: 1;
514 }
515}
516
517#media-sheet {
518 .media-form {
519 flex: 1;
520 display: flex;
521 flex-direction: column;
522 gap: 8px;
523 min-height: 50vh;
524
525 textarea {
526 flex-grow: 1;
527 resize: none;
528 width: 100%;
529 /* height: 10em; */
530
531 &.loading {
532 animation: skeleton-breathe 1.5s linear infinite;
533 }
534 }
535
536 footer {
537 display: flex;
538 justify-content: space-between;
539 align-items: center;
540 }
541 }
542}
543#media-sheet main {
544 padding-top: 8px;
545 display: flex;
546 flex-direction: column;
547 flex: 1;
548 gap: 8px;
549}
550#media-sheet .media-preview {
551 border: 2px solid var(--outline-color);
552 border-radius: 8px;
553 overflow: hidden;
554 box-shadow: 0 2px 16px var(--img-bg-color);
555 /* checkerboard background */
556 background-image: linear-gradient(
557 45deg,
558 var(--img-bg-color) 25%,
559 transparent 25%
560 ),
561 linear-gradient(-45deg, var(--img-bg-color) 25%, transparent 25%),
562 linear-gradient(45deg, transparent 75%, var(--img-bg-color) 75%),
563 linear-gradient(-45deg, transparent 75%, var(--img-bg-color) 75%);
564 background-size: 20px 20px;
565 background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
566 flex: 0.8;
567}
568#media-sheet .media-preview > * {
569 width: 100%;
570 height: 100%;
571 max-height: 50vh;
572 object-fit: scale-down;
573 vertical-align: middle;
574}
575
576@media (min-width: 50em) {
577 #media-sheet main {
578 flex-direction: row;
579 }
580 #media-sheet .media-preview {
581 flex: 2;
582 }
583 #media-sheet .media-preview > * {
584 max-height: none;
585 }
586 /* #media-sheet textarea {
587 flex: 1;
588 min-height: 100%;
589 height: auto;
590 } */
591}
592
593#custom-emojis-sheet {
594 max-height: 50vh;
595 max-height: 50dvh;
596}
597#custom-emojis-sheet main {
598 mask-image: none;
599}
600#custom-emojis-sheet .custom-emojis-list .section-header {
601 font-size: 80%;
602 text-transform: uppercase;
603 color: var(--text-insignificant-color);
604 padding: 8px 0 4px;
605 position: sticky;
606 top: 0;
607 background-color: var(--bg-blur-color);
608 backdrop-filter: blur(1px);
609}
610#custom-emojis-sheet .custom-emojis-list section {
611 display: flex;
612 flex-wrap: wrap;
613}
614#custom-emojis-sheet .custom-emojis-list button {
615 border-radius: 8px;
616 background-image: radial-gradient(
617 closest-side,
618 var(--img-bg-color),
619 transparent
620 );
621}
622#custom-emojis-sheet .custom-emojis-list button:is(:hover, :focus) {
623 filter: none;
624 background-color: var(--bg-faded-color);
625}
626#custom-emojis-sheet .custom-emojis-list button img {
627 transition: transform 0.1s ease-out;
628}
629#custom-emojis-sheet .custom-emojis-list button:is(:hover, :focus) img {
630 transform: scale(1.5);
631}
632
633.compose-field-container {
634 display: grid !important;
635
636 @media (width < 30em) {
637 margin-inline: calc(-1 * var(--form-padding-inline));
638 width: 100vw !important;
639 max-width: 100vw;
640
641 .compose-field {
642 border-radius: 0;
643 outline-offset: -2px;
644 }
645 }
646
647 &.debug {
648 grid-template-columns: 1fr 1fr;
649 }
650
651 > .compose-field,
652 > .compose-highlight {
653 grid-area: 1 / 1 / 2 / 2;
654 }
655
656 .compose-highlight {
657 user-drag: none;
658 user-select: none;
659 pointer-events: none;
660 touch-action: none;
661 padding: 8px;
662 color: transparent;
663 background-color: transparent;
664 border: 2px solid transparent;
665 line-height: 1.4;
666 overflow: auto;
667 unicode-bidi: plaintext;
668 -webkit-rtl-ordering: logical;
669 rtl-ordering: logical;
670 overflow-wrap: break-word;
671 white-space: pre-wrap;
672 min-height: 5em;
673 max-height: 50vh;
674 scrollbar-width: none;
675
676 &::-webkit-scrollbar {
677 display: none;
678 }
679
680 /* Follow textarea styles */
681 @media (min-width: 40em) {
682 max-height: 65vh;
683 }
684
685 mark {
686 color: inherit;
687 }
688
689 .compose-highlight-url,
690 .compose-highlight-hashtag {
691 background-color: transparent;
692 text-decoration: underline;
693 text-decoration-color: var(--link-faded-color);
694 text-decoration-thickness: 2px;
695 text-underline-offset: 2px;
696 }
697 .compose-highlight-mention,
698 .compose-highlight-emoji-shortcode,
699 .compose-highlight-exceeded {
700 mix-blend-mode: multiply;
701 border-radius: 4px;
702 box-shadow: 0 0 0 1px;
703 }
704 .compose-highlight-mention {
705 background-color: var(--orange-light-bg-color);
706 box-shadow-color: var(--orange-light-bg-color);
707 }
708 .compose-highlight-emoji-shortcode {
709 background-color: var(--bg-faded-color);
710 box-shadow-color: var(--bg-faded-color);
711 }
712 .compose-highlight-exceeded {
713 background-color: var(--red-bg-color);
714 box-shadow-color: var(--red-bg-color);
715 }
716
717 @media (prefers-color-scheme: dark) {
718 .compose-highlight-mention,
719 .compose-highlight-emoji-shortcode,
720 .compose-highlight-exceeded {
721 mix-blend-mode: screen;
722 }
723 }
724 }
725}