this repo has no description
1.account-container {
2 /* display: flex; */
3 /* flex-direction: column; */
4 /* overflow: hidden; */
5 overflow-y: auto;
6 max-width: 100%;
7 --banner-overlap: 44px;
8 --posting-stats-size: 8px;
9 --original-color: var(--link-color);
10
11 .note {
12 font-size: 0.95em;
13 line-height: 1.4;
14 text-wrap: pretty;
15 margin-bottom: 16px;
16
17 &:empty {
18 display: none;
19 }
20
21 > *:first-child {
22 margin-top: 0;
23 padding-top: 0;
24 }
25 > *:last-child {
26 margin-bottom: 0;
27 padding-bottom: 0;
28 }
29
30 &:not(:has(p)):not(:empty) {
31 /* Some notes don't have <p> tags, so we need to add some padding */
32 padding: 1em 0;
33 }
34 }
35
36 .posting-stats {
37 font-size: 90%;
38 color: var(--text-insignificant-color);
39 background-color: var(--bg-faded-color);
40 padding: 8px 12px;
41
42 &:is(:hover, :focus-within) {
43 background-color: var(--link-bg-hover-color);
44 }
45 }
46
47 .posting-stats-bar {
48 --gap: 0.5px;
49 --gap-color: var(--outline-color);
50 height: var(--posting-stats-size);
51 border-radius: var(--posting-stats-size);
52 overflow: hidden;
53 margin: 8px 0;
54 box-shadow:
55 inset 0 0 0 1px var(--outline-color),
56 inset 0 0 0 1.5px var(--bg-blur-color);
57 background-color: var(--bg-color);
58 background-repeat: no-repeat;
59 animation: swoosh-bg-image 0.3s ease-in-out 0.3s both;
60 background-image: linear-gradient(
61 var(--to-forward),
62 var(--original-color) 0%,
63 var(--original-color) calc(var(--originals-percentage) - var(--gap)),
64 var(--gap-color) calc(var(--originals-percentage) - var(--gap)),
65 var(--gap-color) calc(var(--originals-percentage) + var(--gap)),
66 var(--reply-to-color) calc(var(--originals-percentage) + var(--gap)),
67 var(--reply-to-color) calc(var(--replies-percentage) - var(--gap)),
68 var(--gap-color) calc(var(--replies-percentage) - var(--gap)),
69 var(--gap-color) calc(var(--replies-percentage) + var(--gap)),
70 var(--reblog-color) calc(var(--replies-percentage) + var(--gap)),
71 var(--reblog-color) 100%
72 );
73 }
74
75 .posting-stats-legends {
76 font-size: 12px;
77 text-transform: uppercase;
78 }
79
80 .posting-stats-legend-item {
81 display: inline-block;
82 width: var(--posting-stats-size);
83 height: var(--posting-stats-size);
84 border-radius: var(--posting-stats-size);
85 background-color: var(--text-insignificant-color);
86 vertical-align: middle;
87 margin: 0 4px 2px;
88 /* border: 1px solid var(--outline-color); */
89 box-shadow:
90 inset 0 0 0 1px var(--outline-color),
91 inset 0 0 0 1.5px var(--bg-blur-color);
92
93 &.posting-stats-legend-item-originals {
94 background-color: var(--original-color);
95 }
96 &.posting-stats-legend-item-replies {
97 background-color: var(--reply-to-color);
98 }
99 &.posting-stats-legend-item-boosts {
100 background-color: var(--reblog-color);
101 }
102 }
103}
104
105.account-container.skeleton {
106 color: var(--outline-color);
107}
108
109.account-container .account-moved {
110 animation: fade-in 0.3s both ease-in-out 0.3s;
111 padding: 16px;
112 background-color: var(--bg-color);
113 position: absolute;
114 top: 8px;
115 inset-inline: 8px;
116 z-index: 3;
117 border: 1px solid var(--outline-color);
118 box-shadow: 0 8px 16px var(--drop-shadow-color);
119 border-radius: calc(16px - 8px);
120 overflow: hidden;
121
122 p {
123 margin: 0 0 8px;
124 padding: 0;
125 }
126
127 .account-block {
128 background-color: var(--bg-faded-color);
129 padding: 8px;
130 border-radius: 8px;
131 border: 1px solid var(--link-faded-color);
132
133 &:hover {
134 background-color: var(--link-bg-hover-color);
135 border-color: var(--link-color);
136 }
137
138 b {
139 color: var(--link-color);
140 }
141 }
142
143 ~ * {
144 /* pointer-events: none; */
145 filter: grayscale(0.75) opacity(0.75);
146 }
147}
148
149.account-container .header-banner {
150 /* pointer-events: none; */
151 vertical-align: top;
152 aspect-ratio: 6 / 1;
153 width: 100%;
154 height: auto;
155 object-fit: cover;
156 /* mask fade out bottom of banner */
157 mask-image: linear-gradient(
158 to bottom,
159 hsl(0, 0%, 0%) 0%,
160 hsla(0, 0%, 0%, 0.987) 14%,
161 hsla(0, 0%, 0%, 0.951) 26.2%,
162 hsla(0, 0%, 0%, 0.896) 36.8%,
163 hsla(0, 0%, 0%, 0.825) 45.9%,
164 hsla(0, 0%, 0%, 0.741) 53.7%,
165 hsla(0, 0%, 0%, 0.648) 60.4%,
166 hsla(0, 0%, 0%, 0.55) 66.2%,
167 hsla(0, 0%, 0%, 0.45) 71.2%,
168 hsla(0, 0%, 0%, 0.352) 75.6%,
169 hsla(0, 0%, 0%, 0.259) 79.6%,
170 hsla(0, 0%, 0%, 0.175) 83.4%,
171 hsla(0, 0%, 0%, 0.104) 87.2%,
172 hsla(0, 0%, 0%, 0.049) 91.1%,
173 hsla(0, 0%, 0%, 0.013) 95.3%,
174 hsla(0, 0%, 0%, 0) 100%
175 );
176 margin-bottom: calc(-1 * var(--banner-overlap));
177 user-select: none;
178 -webkit-user-drag: none;
179 opacity: 0;
180 transition: opacity 0.3s ease-out;
181}
182.account-container .header-banner.loaded {
183 opacity: 1;
184}
185.sheet .account-container .header-banner {
186 border-start-start-radius: 16px;
187 border-start-end-radius: 16px;
188}
189.account-container .header-banner.header-is-avatar {
190 mask-image: linear-gradient(
191 to bottom,
192 hsl(0, 0%, 0%) 0%,
193 hsla(0, 0%, 0%, 0.987) 8.1%,
194 hsla(0, 0%, 0%, 0.951) 15.5%,
195 hsla(0, 0%, 0%, 0.896) 22.5%,
196 hsla(0, 0%, 0%, 0.825) 29%,
197 hsla(0, 0%, 0%, 0.741) 35.3%,
198 hsla(0, 0%, 0%, 0.648) 41.2%,
199 hsla(0, 0%, 0%, 0.55) 47.1%,
200 hsla(0, 0%, 0%, 0.45) 52.9%,
201 hsla(0, 0%, 0%, 0.352) 58.8%,
202 hsla(0, 0%, 0%, 0.259) 64.7%,
203 hsla(0, 0%, 0%, 0.175) 71%,
204 hsla(0, 0%, 0%, 0.104) 77.5%,
205 hsla(0, 0%, 0%, 0.049) 84.5%,
206 hsla(0, 0%, 0%, 0.013) 91.9%,
207 hsla(0, 0%, 0%, 0) 100%
208 );
209 filter: blur(32px) saturate(3) opacity(0.5);
210 pointer-events: none;
211}
212.account-container .header-banner:hover {
213 animation: position-object 5s ease-in-out 1s 5;
214}
215.account-container .header-banner:active {
216 mask-image: none;
217
218 & + header {
219 background-image: none;
220 }
221
222 & + header .avatar-container + * {
223 transition: opacity 0.3s ease-in-out;
224 opacity: 0 !important;
225 }
226
227 &,
228 & + header .avatar-container {
229 transition: filter 0.3s ease-in-out;
230 filter: none !important;
231 }
232
233 & + header .avatar img {
234 transition: border-radius 0.3s ease-in-out;
235 border-radius: 8px;
236 }
237}
238
239@media (min-height: 480px) {
240 .account-container .header-banner:not(.header-is-avatar) {
241 aspect-ratio: 3 / 1;
242 }
243}
244
245.account-container header {
246 position: relative;
247 z-index: 1;
248 display: flex;
249 align-items: center;
250 gap: 8px;
251 text-shadow:
252 -8px 0 12px -6px var(--bg-color),
253 8px 0 12px -6px var(--bg-color),
254 -8px 0 24px var(--header-color-3, --bg-color),
255 8px 0 24px var(--header-color-4, --bg-color);
256 animation: fade-in 0.3s both ease-in-out 0.1s;
257
258 .avatar-container {
259 filter: drop-shadow(-2px 0 4px var(--header-color-3, --bg-color))
260 drop-shadow(2px 0 4px var(--header-color-4, --bg-color));
261 }
262
263 .avatar {
264 /* box-shadow: -8px 0 24px var(--header-color-3, --bg-color),
265 8px 0 24px var(--header-color-4, --bg-color); */
266 /* overflow: initial; */
267
268 &:not(.has-alpha) img {
269 border-radius: inherit;
270 }
271 }
272}
273
274.account-container main > *:first-child {
275 animation: fade-in 0.3s both ease-in-out 0.15s;
276}
277.account-container main > *:first-child ~ * {
278 animation: fade-in 0.3s both ease-in-out 0.2s;
279}
280
281.account-container .account-block .account-block-acct {
282 display: block;
283 opacity: 0.7;
284}
285
286.private-note-tag {
287 z-index: 1;
288 appearance: none;
289 display: inline-block;
290 color: var(--private-note-text-color);
291 background-color: var(--private-note-bg-color);
292 border: 1px solid var(--private-note-border-color);
293 padding: 4px;
294 line-height: normal;
295 font-size: smaller;
296 border-radius: 0;
297 align-self: center !important;
298 /* clip a dog ear on top right */
299 clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 0 100%);
300 &:dir(rtl) {
301 /* top left */
302 clip-path: polygon(4px 0, 100% 0, 100% 100%, 0 100%, 0 4px);
303 }
304 /* 4x4px square on top right */
305 background-size: 4px 4px;
306 background-repeat: no-repeat;
307 background-position: top right;
308 &:dir(rtl) {
309 background-position: top left;
310 }
311 background-image: linear-gradient(
312 to bottom,
313 var(--private-note-border-color),
314 var(--private-note-border-color)
315 );
316 transition: transform 0.15s ease-in-out;
317 overflow-wrap: anywhere;
318
319 span {
320 color: inherit;
321 opacity: 0.75;
322 text-overflow: ellipsis;
323 overflow: hidden;
324 display: -webkit-box;
325 display: box;
326 -webkit-box-orient: vertical;
327 box-orient: vertical;
328 -webkit-line-clamp: 2;
329 line-clamp: 2;
330 text-align: start;
331 }
332
333 &:hover:not(:active) {
334 filter: none !important;
335 transform: rotate(-0.5deg) scale(1.05);
336
337 span {
338 opacity: 1;
339 }
340 }
341}
342.account-container .private-note {
343 font-size: 90%;
344 color: var(--text-insignificant-color);
345 text-overflow: ellipsis;
346 overflow: hidden;
347 white-space: nowrap;
348 padding: 12px;
349 background-color: var(--bg-faded-color);
350 display: flex;
351 gap: 0.5em;
352 align-items: center;
353
354 b {
355 font-size: 90%;
356 text-transform: uppercase;
357 }
358 p {
359 margin: 0;
360 padding: 0;
361 }
362}
363
364.account-container .stats {
365 display: flex;
366 /* flex-wrap: wrap; */
367 column-gap: 24px;
368 row-gap: 8px;
369 /* opacity: 0.75; */
370 font-size: 90%;
371 background-color: var(--bg-faded-color);
372 padding: 12px;
373 /* border-radius: 16px; */
374 line-height: 1.25;
375 overflow-x: auto !important;
376 justify-content: flex-start;
377 position: relative;
378
379 [tabindex='0']:is(:hover, :focus) {
380 color: var(--text-color);
381 cursor: pointer;
382 text-decoration-color: var(--text-insignificant-color);
383 }
384
385 .stats-avatars-bunch {
386 animation: appear 1s both ease-in-out;
387
388 > *:not(:first-child) {
389 margin: 0;
390 margin-inline-start: -4px;
391 }
392 }
393}
394.timeline-start .account-container .stats {
395 flex-wrap: wrap;
396}
397.account-container .stats > * {
398 flex-shrink: 0;
399 display: flex;
400 gap: 0.5em;
401}
402.account-container .stats a:not(.insignificant) {
403 color: inherit;
404}
405.account-container .stats a:hover {
406 color: inherit;
407}
408
409.account-container footer {
410 padding: 0 16px 16px;
411}
412.account-container .actions {
413 /* margin-block: 8px; */
414 display: flex;
415 gap: 8px;
416 justify-content: space-between;
417 min-height: 2.5em;
418 align-items: center;
419}
420.account-container .actions button {
421 /* align-self: flex-end; */
422}
423.account-container .actions .buttons {
424 display: flex;
425 align-items: center;
426}
427
428.account-container .account-metadata-box {
429 overflow: hidden;
430 border-radius: 16px;
431 display: block;
432 text-decoration: none;
433
434 & > * {
435 margin-bottom: 2px;
436 border-radius: 4px;
437 overflow: hidden;
438 }
439
440 &:has(+ .account-metadata-box) {
441 border-end-start-radius: 4px;
442 border-end-end-radius: 4px;
443 }
444
445 + .account-metadata-box {
446 border-start-start-radius: 4px;
447 border-start-end-radius: 4px;
448 border-end-start-radius: 16px;
449 border-end-end-radius: 16px;
450 }
451}
452
453.account-container .profile-metadata {
454 display: flex;
455 /* flex-wrap: wrap; */
456 gap: 2px;
457 overflow: hidden;
458 overflow-x: auto;
459}
460.timeline-start .account-container .profile-metadata {
461 flex-wrap: wrap;
462}
463.account-container .profile-field {
464 min-width: 0;
465 flex-grow: 1;
466 font-size: 90%;
467 background-color: var(--bg-faded-color);
468 padding: 12px;
469 border-radius: 4px;
470 filter: saturate(0.75);
471 line-height: 1.25;
472 flex-shrink: 0;
473 max-width: calc(100% - 12px - 2em);
474}
475.account-container .profile-field:only-child {
476 max-width: 100%;
477}
478.timeline-start .account-container .profile-field {
479 flex-shrink: 1;
480 max-width: 100%;
481}
482
483.account-container :is(.note, .profile-field) .invisible {
484 display: none;
485}
486.account-container :is(.note, .profile-field) .ellipsis::after {
487 content: '…';
488}
489
490.account-container .profile-field b {
491 font-size: 90%;
492 color: var(--text-insignificant-color);
493 text-transform: uppercase;
494}
495.account-container .profile-field b .icon {
496 color: var(--green-color);
497}
498.account-container .profile-field p {
499 margin: 0;
500}
501
502.account-container .common-followers {
503 font-size: 90%;
504 color: var(--text-insignificant-color);
505 background-color: var(--bg-faded-color);
506 padding: 8px 12px;
507 margin: 0;
508}
509
510.timeline-start .account-container {
511 border-bottom: 1px solid var(--outline-color);
512 position: relative;
513}
514.timeline-start .account-container header {
515 padding: 16px;
516 animation: none;
517}
518.timeline-start .account-container main {
519 padding: 1px 16px 16px;
520}
521.timeline-start .account-container main > * {
522 animation: none;
523}
524
525.faux-header-bg {
526 display: none;
527}
528
529@keyframes bye-banner {
530 20% {
531 filter: blur(0) opacity(1);
532 }
533 100% {
534 filter: blur(16px) opacity(0.2);
535 }
536}
537@keyframes surface-header {
538 0% {
539 border-bottom-color: transparent;
540 box-shadow: none;
541 }
542 100% {
543 border-bottom-color: var(--outline-color);
544 box-shadow: 0 8px 16px -8px var(--drop-shadow-color);
545 }
546}
547@keyframes shrink-avatar {
548 0% {
549 width: 64px;
550 height: 64px;
551 }
552 100% {
553 width: 2.5em;
554 height: 2.5em;
555 }
556}
557.sheet .account-container {
558 border-radius: 16px 16px 0 0;
559 overflow-x: hidden;
560 max-height: 75vh;
561 overscroll-behavior: none;
562 scroll-timeline: --account-scroll;
563
564 header {
565 padding-bottom: 16px;
566 position: sticky;
567 top: 0;
568 z-index: 2;
569 background-image: linear-gradient(
570 to bottom,
571 transparent 30%,
572 var(--bg-color) var(--banner-overlap),
573 var(--bg-color) calc(100% - 8px),
574 transparent
575 );
576
577 .account-block-content {
578 display: -webkit-box;
579 -webkit-box-orient: vertical;
580 overflow: hidden;
581 line-clamp: 3;
582 -webkit-line-clamp: 3;
583 }
584 }
585
586 .faux-header-bg {
587 display: block;
588 height: var(--banner-overlap);
589 position: sticky;
590 top: 0;
591 z-index: 1;
592 background-color: var(--bg-color);
593 margin-top: calc(-1 * var(--banner-overlap));
594 }
595
596 @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
597 .header-banner:not(.header-is-avatar):not(:hover):not(:active) {
598 animation: bye-banner 1s linear both;
599 animation-timeline: view();
600 animation-range: contain 100% cover 100%;
601 }
602
603 header {
604 background-image: linear-gradient(
605 to bottom,
606 transparent 30%,
607 var(--bg-color) var(--banner-overlap)
608 );
609 border-bottom: 1px solid transparent;
610 animation: surface-header 1s linear both;
611 animation-timeline: --account-scroll;
612 animation-range: 0 150px;
613 }
614
615 header .avatar {
616 animation: shrink-avatar 1s linear both;
617 animation-timeline: --account-scroll;
618 animation-range: 0 150px;
619 }
620 }
621
622 main {
623 /* margin-top: -8px; */
624 padding-top: 1px;
625 padding-bottom: 16px;
626 }
627
628 footer {
629 min-height: calc(40px + 16px);
630 animation: slide-up 0.3s ease-out 0.3s both;
631 position: sticky;
632 bottom: 0;
633 background-color: var(--bg-faded-blur-color);
634 backdrop-filter: blur(16px) saturate(3);
635 padding: 8px 16px;
636 border-top: var(--hairline-width) solid var(--outline-color);
637 padding-bottom: max(8px, env(safe-area-inset-bottom));
638 box-shadow: 0 -8px 16px -8px var(--drop-shadow-color);
639 }
640}
641
642@keyframes swoosh-bg-image {
643 0% {
644 background-position: -320px 0;
645 opacity: 0.25;
646 }
647 100% {
648 background-position: 0 0;
649 opacity: 1;
650 }
651}
652.account-container .posting-stats-button {
653 display: flex;
654 align-items: center;
655 justify-content: center;
656 gap: 8px;
657 width: 100%;
658 color: inherit;
659 background-color: var(--bg-faded-color);
660 padding: 8px 12px;
661 font-size: 90%;
662 color: var(--text-insignificant-color);
663 line-height: 1;
664 vertical-align: text-top;
665 border-radius: 4px;
666
667 &:is(:hover, :focus-within) {
668 color: var(--text-color);
669 background-color: var(--link-bg-hover-color);
670 filter: none !important;
671 }
672
673 .loader-container {
674 margin: 0;
675 opacity: 0.5;
676 transform: scale(0.75);
677 }
678}
679
680@keyframes wobble {
681 0% {
682 transform: rotate(-4deg);
683 }
684 100% {
685 transform: rotate(4deg);
686 }
687}
688@keyframes loading-spin {
689 0% {
690 transform: rotate(0deg) scale(0.75);
691 }
692 100% {
693 transform: rotate(360deg) scale(0.75);
694 }
695}
696.posting-stats-icon {
697 display: inline-block;
698 width: 24px;
699 height: 8px;
700 filter: opacity(0.75);
701 animation: wobble 2s linear both infinite alternate !important;
702
703 &.loading {
704 animation: loading-spin 0.35s linear both infinite !important;
705 }
706}
707
708#list-add-remove-container .list-add-remove {
709 display: flex;
710 flex-direction: column;
711 gap: 8px;
712 margin: 0;
713 padding: 8px 0;
714 list-style: none;
715}
716#list-add-remove-container .list-add-remove button {
717 border-radius: 16px;
718 display: flex;
719 align-items: center;
720 gap: 8px;
721 width: 100%;
722 text-align: start;
723}
724#list-add-remove-container .list-add-remove button .icon {
725 opacity: 0.15;
726}
727#list-add-remove-container .list-add-remove button.checked {
728 border-color: var(--green-color);
729 font-weight: bold;
730}
731#list-add-remove-container .list-add-remove button.checked .icon {
732 opacity: 1;
733 color: var(--green-color);
734}
735
736@media (min-width: 40em) {
737 .timeline-start .account-container {
738 --banner-overlap: 77px;
739 --item-radius: 16px;
740 border: 1px solid var(--divider-color);
741 margin: 16px 0;
742 background-color: var(--bg-color);
743 border-radius: var(--item-radius);
744 overflow: hidden;
745 /* box-shadow: 0px 1px var(--bg-blur-color), 0 0 64px var(--bg-color); */
746 --shadow-offset: 16px;
747 --shadow-blur: 32px;
748 --shadow-spread: calc(var(--shadow-blur) * -0.75);
749 box-shadow:
750 calc(var(--shadow-offset) * -1) var(--shadow-offset) var(--shadow-blur)
751 var(--shadow-spread) var(--header-color-1, var(--drop-shadow-color)),
752 var(--shadow-offset) var(--shadow-offset) var(--shadow-blur)
753 var(--shadow-spread) var(--header-color-2, var(--drop-shadow-color));
754 }
755 /* .timeline-start .account-container .header-banner {
756 margin-bottom: -77px;
757 } */
758 .timeline-start .account-container header .account-block {
759 font-size: 175%;
760 /* margin-bottom: -8px; */
761 line-height: 1.1;
762 letter-spacing: -0.5px;
763 mix-blend-mode: multiply;
764 gap: 12px;
765
766 .avatar-container {
767 filter: drop-shadow(-8px 0 8px var(--header-color-3, --bg-color))
768 drop-shadow(8px 0 8px var(--header-color-4, --bg-color));
769 }
770
771 .avatar {
772 width: 112px !important;
773 height: 112px !important;
774 }
775 }
776}
777
778#private-note-container {
779 textarea {
780 margin-top: 8px;
781 width: 100%;
782 resize: vertical;
783 height: 33vh;
784 min-height: 25vh;
785 max-height: 50vh;
786 color: var(--private-note-text-color);
787 background-color: var(--private-note-bg-color);
788 border: 1px solid var(--private-note-border-color);
789 box-shadow: 0 2px 8px var(--drop-shadow-color);
790 border-radius: 0;
791 padding: 16px;
792 }
793
794 footer {
795 display: flex;
796 justify-content: space-between;
797 padding: 8px 0;
798
799 * {
800 vertical-align: middle;
801 }
802 }
803}
804
805#edit-profile-container {
806 p {
807 margin-block: 8px;
808 }
809
810 label {
811 input:not([type='file']),
812 textarea {
813 display: block;
814 width: 100%;
815 }
816
817 textarea {
818 resize: vertical;
819 min-height: 5em;
820 max-height: 50vh;
821 }
822 }
823
824 .edit-profile-media-container {
825 margin-block: 8px;
826 }
827
828 .edit-profile-media-field {
829 display: grid;
830 grid-template-columns: 80px 2em 80px;
831 gap: 8px;
832 margin-top: 8px;
833 align-items: center;
834 justify-items: center;
835
836 .icon {
837 opacity: 0.75;
838 }
839
840 .edit-media {
841 width: 80px;
842 height: 80px;
843 border-radius: 4px;
844 overflow: hidden;
845 border: 1px solid var(--outline-color);
846 /* checkerboard background */
847 background-image:
848 linear-gradient(45deg, var(--img-bg-color) 25%, transparent 25%),
849 linear-gradient(-45deg, var(--img-bg-color) 25%, transparent 25%),
850 linear-gradient(45deg, transparent 75%, var(--img-bg-color) 75%),
851 linear-gradient(-45deg, transparent 75%, var(--img-bg-color) 75%);
852 background-size: 10px 10px;
853 background-position:
854 0 0,
855 0 5px,
856 5px -5px,
857 -5px 0px;
858
859 &:hover {
860 box-shadow: 0 0 0 2px var(--link-light-color);
861 cursor: pointer;
862 }
863
864 img {
865 object-fit: contain;
866 width: 100%;
867 height: 100%;
868 vertical-align: top;
869 }
870 }
871 }
872
873 table {
874 width: 100%;
875
876 th {
877 text-align: start;
878 color: var(--text-insignificant-color);
879 font-weight: normal;
880 font-size: 0.8em;
881 text-transform: uppercase;
882 }
883
884 tbody tr td:first-child {
885 width: 40%;
886 }
887
888 input {
889 width: 100%;
890 }
891 }
892
893 footer {
894 display: flex;
895 justify-content: space-between;
896 padding: 8px 0;
897
898 * {
899 vertical-align: middle;
900 }
901 }
902}
903
904.handle-info {
905 .handle-handle {
906 display: inline-block;
907 margin-block: 5px;
908
909 b {
910 font-weight: 600;
911 padding: 2px 4px;
912 border-radius: 4px;
913 display: inline-block;
914 box-shadow: 0 0 0 5px var(--bg-blur-color);
915
916 &.handle-username {
917 color: var(--orange-fg-color);
918 background-color: var(--orange-bg-color);
919 }
920
921 &.handle-server {
922 color: var(--purple-fg-color);
923 background-color: var(--purple-bg-color);
924 }
925 }
926 }
927
928 .handle-at {
929 display: inline-block;
930 margin-inline: -3px;
931 position: relative;
932 z-index: 1;
933 }
934
935 .handle-legend {
936 margin-top: 0.25em;
937 }
938
939 .handle-legend-icon {
940 overflow: hidden;
941 display: inline-block;
942 width: 14px;
943 height: 14px;
944 border: 4px solid transparent;
945 border-radius: 8px;
946 background-clip: padding-box;
947
948 &.username {
949 background-color: var(--orange-fg-color);
950 border-color: var(--orange-bg-color);
951 }
952 &.server {
953 background-color: var(--purple-fg-color);
954 border-color: var(--purple-bg-color);
955 }
956 }
957}
958
959.endorsements-container {
960 padding: 16px;
961 overflow-x: auto;
962 overflow-y: hidden;
963 /* background-image: linear-gradient(
964 to bottom,
965 var(--bg-faded-color),
966 var(--bg-color) calc(16px + 1em)
967 ); */
968 background-image: radial-gradient(
969 ellipse at top center,
970 var(--bg-faded-color),
971 var(--bg-color)
972 );
973 background-size: 100% 32px;
974 background-repeat: no-repeat;
975 mask-image: linear-gradient(
976 var(--to-forward),
977 transparent,
978 black 16px calc(100% - 16px),
979 transparent
980 );
981
982 h3 {
983 margin: 0;
984 padding: 0 0 8px;
985 font-weight: normal;
986 color: var(--text-insignificant-color);
987 font-size: 85%;
988 position: sticky;
989 left: 0;
990 text-transform: uppercase;
991 font-weight: 600;
992
993 > * {
994 vertical-align: text-bottom;
995 }
996 }
997
998 .endorsements {
999 margin: 0;
1000 padding: 0;
1001 list-style: none;
1002
1003 /* grid: 2 rows, infinite columns, no wrap */
1004 display: grid;
1005 grid-auto-flow: column;
1006 grid-template-rows: repeat(2, auto);
1007 grid-template-columns: repeat(9999, clamp(160px, 90%, 320px));
1008 white-space: nowrap;
1009 gap: 8px;
1010
1011 &.expanded {
1012 grid-template-rows: repeat(3, auto);
1013 }
1014
1015 > li {
1016 display: flex;
1017 }
1018
1019 .account-block {
1020 overflow: hidden;
1021 flex-grow: 1;
1022 padding: 8px 16px;
1023 background-color: var(--bg-faded-color);
1024 background-image: linear-gradient(
1025 15deg,
1026 var(--link-bg-color),
1027 var(--bg-faded-color) 8px calc(100% - 16px),
1028 var(--bg-color)
1029 );
1030 &:dir(rtl) {
1031 background-image: linear-gradient(
1032 -15deg,
1033 var(--link-bg-color),
1034 var(--bg-faded-color) 16px calc(100% - 16px),
1035 var(--bg-color)
1036 );
1037 }
1038 /* box-shadow: inset 0 0 0 2px var(--bg-color); */
1039 border-radius: 8px;
1040 transition: all 0.15s ease-out;
1041
1042 .avatar {
1043 transition: transform 0.15s ease-out;
1044 }
1045
1046 .account-block-content {
1047 min-width: 0;
1048 mask-image: linear-gradient(var(--to-backward), transparent, black 16px);
1049 }
1050
1051 .account-block-stats {
1052 flex-wrap: nowrap;
1053
1054 > * {
1055 flex-shrink: 0;
1056 }
1057 }
1058
1059 &:is(:hover, :focus-visible) {
1060 background-color: var(--link-bg-hover-color);
1061 box-shadow: inset 0 0 0 2px var(--link-light-color);
1062
1063 .avatar {
1064 transform: rotate(15deg);
1065 }
1066 }
1067
1068 &:active {
1069 transition-duration: 0s;
1070 filter: brightness(0.8);
1071 }
1072
1073 .tag.minimal {
1074 background-color: var(--bg-color);
1075 }
1076 }
1077 }
1078}