4 -ms-flex-direction: column
;
5 flex-direction: column
;
12 .login-form .register {
16 .login-form .login-bottom {
20 -ms-flex-direction: row
;
22 -ms-flex-align: center
;
24 -ms-flex-pack: justify
;
25 justify-content: space-between
;
27 .login-form .form-group {
30 -ms-flex-direction: column
;
31 flex-direction: column
;
32 padding: 0.3em 0.5em 0.6em;
35 .login-form .form-bottom {
41 .login-form .form-bottom button {
44 .login-form .form-bottom p {
52 animation-name: shakeError
;
53 animation-duration: 0.4s;
54 animation-timing-function: ease-in-out
;
59 .media-upload .hidden-input-file {
62 .ScopeSelector .scope {
63 display: inline-block
;
69 .ScopeSelector .scope.selected svg {
71 color: var
(--lightText
, #b9b9ba);
76 display: inline-block
;
83 .checkbox-indicator::before {
89 transition: color
200ms;
93 border-radius: var
(--checkboxRadius
, 2px);
94 box-shadow: 0px 0px 2px black inset
;
95 box-shadow: var
(--inputShadow
);
96 background-color: #182230;
97 background-color: var
(--input
, #182230);
104 box-sizing: border-box
;
106 .checkbox
.disabled
.checkbox-indicator::before
,
107 .checkbox.disabled .label {
110 .checkbox.disabled .label {
111 color: rgba
(185, 185, 186, 0.5);
112 color: var
(--faint
, rgba
(185, 185, 186, 0.5));
114 .checkbox input[type=checkbox] {
117 .checkbox input[type=checkbox]:checked + .checkbox-indicator::before {
119 color: var
(--inputText
, #b9b9ba);
121 .checkbox input[type=checkbox]:indeterminate + .checkbox-indicator::before {
124 color: var
(--inputText
, #b9b9ba);
130 display: -ms-flexbox
;
132 -ms-flex-direction: column
;
133 flex-direction: column
;
137 margin: 0 !important
;
139 background-color: #121a24;
140 background-color: var
(--popover
, #121a24);
142 color: var
(--popoverText
, #d8a070);
143 --lightText: var
(--popoverLightText
, $fallback--faint
);
144 --faint: var
(--popoverFaintText
, $fallback--faint
);
145 --faintLink: var
(--popoverFaintLink
, $fallback--faint
);
146 --lightText: var
(--popoverLightText
, $fallback--lightText
);
147 --icon: var
(--popoverIcon
, $fallback--icon
);
149 .emoji-picker
.keep-open
,
150 .emoji-picker .too-many-emoji {
154 .emoji-picker .too-many-emoji {
155 display: -ms-flexbox
;
157 -ms-flex-direction: column
;
158 flex-direction: column
;
160 .emoji-picker .keep-open-label {
162 display: -ms-flexbox
;
165 .emoji-picker .heading {
166 display: -ms-flexbox
;
169 padding: 10px 7px 5px;
171 .emoji-picker .content {
172 display: -ms-flexbox
;
174 -ms-flex-direction: column
;
175 flex-direction: column
;
180 .emoji-picker .emoji-tabs {
181 -ms-flex-positive: 1;
184 .emoji-picker .emoji-groups {
187 .emoji-picker .additional-tabs {
188 border-left: 1px solid
;
189 border-left-color: #666;
190 border-left-color: var
(--icon
, #666);
195 .emoji-picker
.additional-tabs
,
196 .emoji-picker .emoji-tabs {
199 -ms-flex-preferred-size: auto
;
201 -ms-flex-negative: 1;
204 .emoji-picker
.additional-tabs-item
,
205 .emoji-picker .emoji-tabs-item {
210 .emoji-picker
.additional-tabs-item
.disabled
,
211 .emoji-picker .emoji-tabs-item.disabled {
213 pointer-events: none
;
215 .emoji-picker
.additional-tabs-item
.active
,
216 .emoji-picker .emoji-tabs-item.active {
217 border-bottom: 4px solid
;
219 .emoji-picker
.additional-tabs-item
.active svg
,
220 .emoji-picker .emoji-tabs-item.active svg {
222 color: var
(--lightText
, #b9b9ba);
224 .emoji-picker .sticker-picker {
228 .emoji-picker
.stickers-content
,
229 .emoji-picker .emoji-content {
230 display: -ms-flexbox
;
232 -ms-flex-direction: column
;
233 flex-direction: column
;
238 .emoji-picker
.stickers-content
.hidden
,
239 .emoji-picker .emoji-content.hidden {
241 pointer-events: none
;
244 .emoji-picker .emoji-search {
249 .emoji-picker .emoji-search input {
252 .emoji-picker .emoji-groups {
257 -webkit-user-select: none
;
258 -moz-user-select: none
;
259 -ms-user-select: none
;
261 -webkit-mask: linear-gradient
(to top
, white
0, transparent
100%) bottom no-repeat
, linear-gradient
(to bottom
, white
0, transparent
100%) top no-repeat
, linear-gradient
(to top
, white
, white
);
262 mask: linear-gradient
(to top
, white
0, transparent
100%) bottom no-repeat
, linear-gradient
(to bottom
, white
0, transparent
100%) top no-repeat
, linear-gradient
(to top
, white
, white
);
263 transition: -webkit-mask-size
150ms;
264 transition: mask-size
150ms;
265 transition: mask-size
150ms, -webkit-mask-size
150ms;
266 -webkit-mask-size: 100% 20px, 100% 20px, auto
;
267 mask-size: 100% 20px, 100% 20px, auto
;
268 -webkit-mask-composite: xor
;
269 mask-composite: exclude
;
271 .emoji-picker .emoji-groups.scrolled-top {
272 -webkit-mask-size: 100% 20px, 100% 0, auto
;
273 mask-size: 100% 20px, 100% 0, auto
;
275 .emoji-picker .emoji-groups.scrolled-bottom {
276 -webkit-mask-size: 100% 0, 100% 20px, auto
;
277 mask-size: 100% 0, 100% 20px, auto
;
279 .emoji-picker .emoji-group {
280 display: -ms-flexbox
;
282 -ms-flex-align: center
;
288 justify-content: left
;
290 .emoji-picker .emoji-group-title {
295 .emoji-picker .emoji-group-title.disabled {
298 .emoji-picker .emoji-item {
301 box-sizing: border-box
;
302 display: -ms-flexbox
;
305 -ms-flex-align: center
;
307 -ms-flex-pack: center
;
308 justify-content: center
;
312 .emoji-picker .emoji-item img {
313 -o-object-fit: contain
;
319 display: -ms-flexbox
;
321 -ms-flex-direction: column
;
322 flex-direction: column
;
325 .emoji-input.with-picker input {
328 .emoji-input .emoji-picker-icon {
332 margin: 0.2em 0.25em;
337 .emoji-input .emoji-picker-icon:hover i {
339 color: var
(--text
, #b9b9ba);
341 .emoji-input .emoji-picker-panel {
346 .emoji-input .emoji-picker-panel.hide {
349 .emoji-input .autocomplete-panel {
354 .emoji-input .autocomplete-panel.hide {
357 .emoji-input .autocomplete-panel-body {
358 margin: 0 0.5em 0 0.5em;
360 border-radius: var
(--tooltipRadius
, 5px);
361 box-shadow: 1px 2px 4px rgba
(0, 0, 0, 0.5);
362 box-shadow: var
(--popupShadow
);
364 background-color: #121a24;
365 background-color: var
(--popover
, #121a24);
367 color: var
(--popoverText
, #d8a070);
368 --faint: var
(--popoverFaintText
, $fallback--faint
);
369 --faintLink: var
(--popoverFaintLink
, $fallback--faint
);
370 --lightText: var
(--popoverLightText
, $fallback--lightText
);
371 --postLink: var
(--popoverPostLink
, $fallback--link
);
372 --postFaintLink: var
(--popoverPostFaintLink
, $fallback--link
);
373 --icon: var
(--popoverIcon
, $fallback--icon
);
375 .emoji-input .autocomplete-item {
376 display: -ms-flexbox
;
379 padding: 0.2em 0.4em;
380 border-bottom: 1px solid rgba
(0, 0, 0, 0.4);
383 .emoji-input .autocomplete-item .image {
391 .emoji-input .autocomplete-item .image img {
394 -o-object-fit: contain
;
397 .emoji-input .autocomplete-item .label {
398 display: -ms-flexbox
;
400 -ms-flex-direction: column
;
401 flex-direction: column
;
402 -ms-flex-pack: center
;
403 justify-content: center
;
404 margin: 0 0.1em 0 0.2em;
406 .emoji-input .autocomplete-item .label .displayText {
409 .emoji-input .autocomplete-item .label .detailText {
413 .emoji-input .autocomplete-item.highlighted {
414 background-color: #182230;
415 background-color: var
(--selectedMenuPopover
, #182230);
416 color: var
(--selectedMenuPopoverText
, #b9b9ba);
417 --faint: var
(--selectedMenuPopoverFaintText
, $fallback--faint
);
418 --faintLink: var
(--selectedMenuPopoverFaintLink
, $fallback--faint
);
419 --lightText: var
(--selectedMenuPopoverLightText
, $fallback--lightText
);
420 --icon: var
(--selectedMenuPopoverIcon
, $fallback--icon
);
422 .emoji-input input, .emoji-input textarea {
426 /* TODO fix order of styles */
430 label
.Select select
{
431 -webkit-appearance: none
;
432 -moz-appearance: none
;
434 background: transparent
;
437 color: var
(--inputText
, --text
, #b9b9ba);
439 padding: 0 2em 0 0.2em;
440 font-family: sans-serif
;
441 font-family: var
(--inputFont
, sans-serif
);
448 label
.Select
.select-down-icon
{
456 color: var
(--inputText
, #b9b9ba);
459 pointer-events: none
;
462 display: -ms-flexbox
;
464 -ms-flex-direction: column
;
465 flex-direction: column
;
466 padding: 0 0.5em 0.5em;
468 .poll-form .add-option {
469 -ms-flex-item-align: start
;
470 align-self: flex-start
;
474 .poll-form .poll-option {
475 display: -ms-flexbox
;
477 -ms-flex-align: baseline
;
478 align-items: baseline
;
479 -ms-flex-pack: justify
;
480 justify-content: space-between
;
481 margin-bottom: 0.25em;
483 .poll-form .input-container {
486 .poll-form .input-container input {
487 padding-right: 2.5em;
490 .poll-form .delete-option {
495 .poll-form .poll-type-expiry {
497 display: -ms-flexbox
;
501 .poll-form .poll-type {
502 margin-right: 0.75em;
506 .poll-form .poll-type .poll-type-select {
507 padding-right: 0.75em;
509 .poll-form .poll-expiry {
510 display: -ms-flexbox
;
513 .poll-form .poll-expiry .expiry-amount {
521 display: -ms-inline-flexbox
;
522 display: inline-flex
;
523 -ms-flex-align: center
;
526 .still-image canvas {
534 -o-object-fit: contain
;
536 visibility: var
(--_still-image-canvas-visibility
, visible
);
541 -o-object-fit: contain
;
544 .still-image.animated::before {
545 zoom: var
(--_still_image-label-scale
, 1);
552 background: rgba
(127, 127, 127, 0.5);
557 border-radius: var
(--tooltipRadius
, 5px);
559 visibility: var
(--_still-image-label-visibility
, visible
);
561 .still-image.animated:hover canvas {
564 .still-image.animated:hover::before {
565 visibility: var
(--_still-image-label-visibility
, hidden
);
567 .still-image.animated img {
568 visibility: var
(--_still-image-img-visibility
, hidden
);
570 .still-image.animated:hover img {
574 display: inline-block
;
583 .Flash .placeholder {
586 display: -ms-flexbox
;
588 -ms-flex-align: center
;
590 -ms-flex-pack: center
;
591 justify-content: center
;
592 background: var
(--bg
);
608 visibility: "hidden";
611 display: -ms-inline-flexbox
;
612 display: inline-flex
;
613 -ms-flex-direction: column
;
614 flex-direction: column
;
616 -ms-flex-item-align: start
;
617 align-self: flex-start
;
623 border-radius: var
(--attachmentRadius
, 10px);
625 border-color: var
(--border
, #222);
627 .Attachment .attachment-wrapper {
634 .Attachment .description-container {
637 display: -ms-flexbox
;
642 .Attachment .description-container p {
650 text-overflow: ellipsis
;
653 .Attachment .description-container.-static {
659 background: var
(--popover
);
660 box-shadow: var
(--popupShadow
);
662 .Attachment .description-field {
667 .Attachment .placeholder-container, .Attachment .image-container, .Attachment .audio-container, .Attachment .video-container, .Attachment .flash-container, .Attachment .oembed-container {
668 display: -ms-flexbox
;
670 -ms-flex-pack: center
;
671 justify-content: center
;
675 .Attachment .image-container .image {
679 .Attachment .flash-container .flash, .Attachment .flash-container video, .Attachment .video-container .flash, .Attachment .video-container video {
682 -o-object-fit: contain
;
684 -ms-flex-item-align: center
;
685 -ms-grid-row-align: center
;
688 .Attachment .audio-container {
689 display: -ms-flexbox
;
692 align-items: flex-end
;
694 .Attachment .audio-container audio {
698 .Attachment .placeholder-container {
699 display: -ms-flexbox
;
701 -ms-flex-direction: column
;
702 flex-direction: column
;
703 -ms-flex-align: center
;
705 -ms-flex-pack: center
;
706 justify-content: center
;
709 .Attachment .play-icon {
712 top: calc
(50% - 32px);
713 left: calc
(50% - 32px);
714 color: rgba
(255, 255, 255, 0.75);
715 text-shadow: 0 0 2px rgba
(0, 0, 0, 0.4);
717 .Attachment .play-icon::before {
720 .Attachment .attachment-buttons {
721 display: -ms-flexbox
;
730 .Attachment .attachment-buttons .attachment-button {
733 border-radius: var
(--tooltipRadius
, 5px);
739 background: rgba
(230, 230, 230, 0.7);
741 .Attachment .attachment-buttons .attachment-button .svg-inline--fa {
742 color: rgba
(0, 0, 0, 0.6);
744 .Attachment .attachment-buttons .attachment-button:hover .svg-inline--fa {
745 color: rgba
(0, 0, 0, 0.9);
747 .Attachment .oembed-container {
753 display: -ms-flexbox
;
756 .Attachment .oembed-container img {
759 .Attachment .oembed-container .image {
763 .Attachment .oembed-container .image img {
767 -o-object-fit: cover
;
770 .Attachment .oembed-container .text {
774 word-break: break-all
;
776 .Attachment .oembed-container .text h1 {
780 .Attachment.-size-small .play-icon {
784 .Attachment.-size-small .attachment-buttons {
788 .Attachment.-editable {
791 .Attachment.-editable .description-container, .Attachment.-editable .attachment-buttons {
794 .Attachment.-placeholder {
795 display: inline-block
;
797 color: var
(--postLink
, #d8a070);
803 .Attachment.-placeholder:not(.-editable) {
806 .Attachment.-placeholder.-editable {
807 display: -ms-flexbox
;
809 -ms-flex-direction: row
;
811 -ms-flex-align: baseline
;
812 align-items: baseline
;
814 .Attachment.-placeholder.-editable .description-container, .Attachment.-placeholder.-editable .attachment-buttons {
819 .Attachment.-placeholder.-editable .description-container {
824 .Attachment.-placeholder.-editable .attachment-buttons {
827 -ms-flex-item-align: center
;
828 -ms-grid-row-align: center
;
831 .Attachment.-placeholder a {
832 display: inline-block
;
835 text-overflow: ellipsis
;
837 .Attachment.-placeholder svg {
840 .Attachment.-loading {
843 .Attachment
.-contain-fit img
,
844 .Attachment.-contain-fit canvas {
845 -o-object-fit: contain
;
848 .Attachment
.-cover-fit img
,
849 .Attachment.-cover-fit canvas {
850 -o-object-fit: cover
;
853 .Gallery .gallery-rows {
854 display: -ms-flexbox
;
856 -ms-flex-direction: column
;
857 flex-direction: column
;
859 .Gallery .gallery-row {
863 -ms-flex-positive: 1;
866 .Gallery .gallery-row:not(:first-child) {
869 .Gallery.-long .gallery-rows {
872 -webkit-mask: linear-gradient
(to top
, white
, transparent
) bottom
/100% 70px no-repeat
, linear-gradient
(to top
, white
, white
);
873 mask: linear-gradient
(to top
, white
, transparent
) bottom
/100% 70px no-repeat
, linear-gradient
(to top
, white
, white
);
874 /* Autoprefixed seem to ignore this one, and also syntax is different */
875 -webkit-mask-composite: xor
;
876 mask-composite: exclude
;
878 .Gallery .many-attachments-text {
882 .Gallery .many-attachments-buttons {
883 display: -ms-flexbox
;
886 .Gallery .many-attachments-button {
887 display: -ms-flexbox
;
891 -ms-flex-pack: center
;
892 justify-content: center
;
895 .Gallery .many-attachments-button button {
898 .Gallery .gallery-row.-grid, .Gallery .gallery-row.-minimal {
901 .Gallery .gallery-row.-grid .gallery-row-inner, .Gallery .gallery-row.-minimal .gallery-row-inner {
904 .Gallery .gallery-row-inner {
910 display: -ms-flexbox
;
912 -ms-flex-direction: row
;
914 -ms-flex-wrap: nowrap
;
916 -ms-flex-line-pack: stretch
;
917 align-content: stretch
;
919 .Gallery .gallery-row-inner.-grid {
925 grid-column-gap: 0.5em;
927 -ms-grid-columns: (minmax
(15em, 1fr))[auto-fill
];
928 grid-template-columns: repeat
(auto-fill
, minmax
(15em, 1fr));
930 .Gallery .gallery-row-inner.-grid .gallery-item {
934 .Gallery .gallery-item {
936 -ms-flex-positive: 1;
939 box-sizing: border-box
;
942 .Gallery .gallery-item:last-child {
946 --_avatarShadowBox: var
(--avatarStatusShadow
);
947 --_avatarShadowFilter: var
(--avatarStatusShadowFilter
);
948 --_avatarShadowInset: var
(--avatarStatusShadowInset
);
949 --_still-image-label-visibility: hidden
;
950 display: inline-block
;
959 border-radius: var
(--avatarAltRadius
, 10px);
964 box-shadow: var
(--_avatarShadowBox
);
966 border-radius: var
(--avatarRadius
, 4px);
968 .Avatar .avatar.-better-shadow {
969 box-shadow: var
(--_avatarShadowInset
);
970 filter: var
(--_avatarShadowFilter
);
972 .Avatar .avatar.-animated::before {
975 .Avatar .avatar.-compact {
977 border-radius: var
(--avatarAltRadius
, 10px);
979 .Avatar .avatar.-placeholder {
980 background-color: #182230;
981 background-color: var
(--fg
, #182230);
987 .Avatar .bot-indicator {
993 background: rgba
(127, 127, 127, 0.5);
995 border-radius: var
(--tooltipRadius
);
1004 .MentionLink .new, .MentionLink .original {
1008 .MentionLink .mention-avatar {
1009 border-radius: var
(--avatarAltRadius
, 10px);
1012 vertical-align: middle
;
1013 -webkit-user-select: none
;
1014 -moz-user-select: none
;
1015 -ms-user-select: none
;
1017 margin-right: 0.2em;
1019 .MentionLink .full {
1021 display: inline-block
;
1022 pointer-events: none
;
1028 white-space: nowrap
;
1029 transition: opacity
0.2s ease
;
1033 -webkit-user-select: all
;
1034 -moz-user-select: all
;
1035 -ms-user-select: all
;
1038 .MentionLink .short.-with-tooltip, .MentionLink .you {
1039 -webkit-user-select: none
;
1040 -moz-user-select: none
;
1041 -ms-user-select: none
;
1044 .MentionLink .short, .MentionLink .full {
1045 white-space: nowrap
;
1047 .MentionLink .shortName {
1048 white-space: normal
;
1050 .MentionLink .new .at {
1053 display: inline-block
;
1056 vertical-align: -25%;
1059 .MentionLink .new.-striped .shortName, .MentionLink .new.-striped .full {
1060 background-image: repeating-linear-gradient
(135deg, var
(--____highlight-tintColor
), var
(--____highlight-tintColor
) 5px, var
(--____highlight-tintColor2
) 5px, var
(--____highlight-tintColor2
) 10px);
1062 .MentionLink .new.-solid .shortName, .MentionLink .new.-solid .full {
1063 background-image: linear-gradient
(var
(--____highlight-tintColor2
), var
(--____highlight-tintColor2
));
1065 .MentionLink .new.-side .shortName, .MentionLink .new.-side .userNameFull {
1066 box-shadow: 0 -5px 3px -4px inset var
(--____highlight-solidColor
);
1068 .MentionLink:hover .new .full {
1070 pointer-events: initial
;
1072 .MentionLink .serverName.-faded {
1073 color: var
(--faintLink
, #d8a070);
1075 .MentionLink .full .-faded {
1076 color: var
(--faint
, rgba
(185, 185, 186, 0.5));
1079 word-break: break-all
;
1081 .MentionsLine .mention-link:not(:first-child)::before {
1084 .MentionsLine .showMoreLess {
1086 white-space: normal
;
1091 white-space: normal
;
1092 display: inline-block
;
1095 .RichContent blockquote {
1096 margin: 0.2em 0 0.2em 2em;
1107 font-family: var
(--postCodeFont
, monospace
);
1112 .RichContent p:last-child {
1132 display: inline-block
;
1134 .RichContent .emoji {
1135 display: inline-block
;
1136 width: var
(--emoji-size
, 32px);
1137 height: var
(--emoji-size
, 32px);
1140 .RichContent video {
1143 vertical-align: middle
;
1144 -o-object-fit: contain
;
1145 object-fit: contain
;
1148 display: -ms-flexbox
;
1150 -ms-flex-direction: column
;
1151 flex-direction: column
;
1154 .poll .poll-option {
1155 margin: 0.75em 0.5em;
1157 .poll .option-result {
1159 display: -ms-flexbox
;
1161 -ms-flex-direction: row
;
1162 flex-direction: row
;
1165 color: var
(--lightText
, #b9b9ba);
1167 .poll .option-result-label {
1168 display: -ms-flexbox
;
1170 -ms-flex-align: center
;
1171 align-items: center
;
1172 padding: 0.1em 0.25em;
1174 word-break: break-word
;
1176 .poll .result-percentage {
1178 -ms-flex-negative: 0;
1181 .poll .result-fill {
1185 color: var
(--pollText
, #b9b9ba);
1186 background-color: #151e2a;
1187 background-color: var
(--poll
, #151e2a);
1188 border-radius: 10px;
1189 border-radius: var
(--panelRadius
, 10px);
1192 transition: width
0.5s;
1194 .poll .option-vote {
1195 display: -ms-flexbox
;
1197 -ms-flex-align: center
;
1198 align-items: center
;
1204 display: -ms-flexbox
;
1206 -ms-flex-align: center
;
1207 align-items: center
;
1212 .poll .poll-vote-button {
1214 margin-right: 0.5em;
1217 display: -ms-flexbox
;
1219 -ms-flex-direction: column
;
1220 flex-direction: column
;
1222 .StatusBody .emoji {
1223 --_still_image-label-scale: 0.5;
1227 .StatusBody .attachments {
1230 .StatusBody .text, .StatusBody .summary {
1231 font-family: var
(--postFont
, sans-serif
);
1232 white-space: pre-wrap
;
1233 overflow-wrap: break-word
;
1234 word-wrap: break-word
;
1235 word-break: break-word
;
1236 line-height: var
(--post-line-height
);
1238 .StatusBody .summary {
1241 padding-bottom: 0.5em;
1243 .StatusBody .text.-single-line {
1244 white-space: nowrap
;
1245 text-overflow: ellipsis
;
1249 .StatusBody .summary-wrapper {
1250 margin-bottom: 0.5em;
1251 border-style: solid
;
1252 border-width: 0 0 1px 0;
1253 border-color: var
(--border
, #222);
1254 -ms-flex-positive: 0;
1257 .StatusBody .summary-wrapper.-tall {
1260 .StatusBody .summary-wrapper.-tall .summary {
1263 white-space: nowrap
;
1264 text-overflow: ellipsis
;
1266 .StatusBody .text-wrapper {
1267 display: -ms-flexbox
;
1269 -ms-flex-direction: column
;
1270 flex-direction: column
;
1271 -ms-flex-wrap: nowrap
;
1274 .StatusBody .text-wrapper.-tall-status {
1281 .StatusBody .text-wrapper.-tall-status .media-body {
1283 -webkit-mask: linear-gradient
(to top
, white
, transparent
) bottom
/100% 70px no-repeat
, linear-gradient
(to top
, white
, white
);
1284 mask: linear-gradient
(to top
, white
, transparent
) bottom
/100% 70px no-repeat
, linear-gradient
(to top
, white
, white
);
1285 /* Autoprefixed seem to ignore this one, and also syntax is different */
1286 -webkit-mask-composite: xor
;
1287 mask-composite: exclude
;
1289 .StatusBody .tall-status-hider, .StatusBody .tall-subject-hider, .StatusBody .status-unhider, .StatusBody .cw-status-hider {
1290 display: inline-block
;
1291 word-break: break-all
;
1295 .StatusBody .tall-status-hider {
1302 .StatusBody .tall-subject-hider {
1303 padding-bottom: 0.5em;
1305 .StatusBody .status-unhider, .StatusBody .cw-status-hider {
1306 word-break: break-all
;
1308 .StatusBody .status-unhider svg, .StatusBody .cw-status-hider svg {
1311 .StatusBody .greentext {
1313 color: var
(--postGreentext
, #0fa00f);
1315 .StatusBody .cyantext {
1316 color: var
(--postCyantext
, #0095ff);
1318 .StatusBody.-compact {
1319 -ms-flex-align: top
;
1321 -ms-flex-direction: row
;
1322 flex-direction: row
;
1325 .StatusBody.-compact .body, .StatusBody.-compact .attachments {
1328 .StatusBody.-compact .body {
1330 white-space: normal
;
1334 -webkit-mask-size: auto
3.5em, auto auto
;
1335 mask-size: auto
3.5em, auto auto
;
1336 -webkit-mask-position: 0 0, 0 0;
1337 mask-position: 0 0, 0 0;
1338 -webkit-mask-repeat: repeat-x
, repeat
;
1339 mask-repeat: repeat-x
, repeat
;
1340 -webkit-mask-image: linear-gradient
(to bottom
, white
2em, transparent
3em);
1341 mask-image: linear-gradient
(to bottom
, white
2em, transparent
3em);
1342 /* Autoprefixed seem to ignore this one, and also syntax is different */
1343 -webkit-mask-composite: xor
;
1344 mask-composite: exclude
;
1346 .StatusBody.-compact .attachments {
1354 .StatusBody.-compact .summary-wrapper {
1355 line-height: inherit
;
1358 display: inline-block
;
1360 .StatusBody.-compact .summary-wrapper .summary::after {
1363 .StatusBody.-compact .text-wrapper {
1364 display: inline-block
;
1366 .link-preview-card {
1367 display: -ms-flexbox
;
1369 -ms-flex-direction: row
;
1370 flex-direction: row
;
1375 color: var
(--text
, #b9b9ba);
1376 border-style: solid
;
1378 border-radius: 10px;
1379 border-radius: var
(--attachmentRadius
, 10px);
1381 border-color: var
(--border
, #222);
1383 .link-preview-card .card-image {
1384 -ms-flex-negative: 0;
1389 .link-preview-card .card-image img {
1392 -o-object-fit: cover
;
1394 border-radius: 10px;
1395 border-radius: var
(--attachmentRadius
, 10px);
1397 .link-preview-card .card-content {
1400 display: -ms-flexbox
;
1402 -ms-flex-direction: column
;
1403 flex-direction: column
;
1405 .link-preview-card .card-host {
1408 .link-preview-card .card-description {
1409 margin: 0.5em 0 0 0;
1411 text-overflow: ellipsis
;
1412 word-break: break-word
;
1414 max-height: calc
(1.2em * 3 - 1px);
1416 .link-preview-card .nsfw-alert {
1424 .StatusContent img.emoji, .StatusContent video.emoji {
1431 .post-status-form .attachments {
1432 margin-bottom: 0.5em;
1434 .post-status-form .form-bottom {
1435 display: -ms-flexbox
;
1437 -ms-flex-pack: justify
;
1438 justify-content: space-between
;
1442 .post-status-form .form-bottom button {
1445 .post-status-form .form-bottom p {
1448 display: -ms-flexbox
;
1451 .post-status-form .form-bottom-left {
1452 display: -ms-flexbox
;
1460 .post-status-form .preview-heading {
1461 display: -ms-flexbox
;
1463 padding-left: 0.5em;
1465 .post-status-form .preview-toggle {
1469 -webkit-user-select: none
;
1470 -moz-user-select: none
;
1471 -ms-user-select: none
;
1474 .post-status-form .preview-toggle:hover {
1475 text-decoration: underline
;
1477 .post-status-form .preview-toggle svg, .post-status-form .preview-toggle i {
1480 transform: rotate
(90deg);
1482 .post-status-form .preview-container {
1485 .post-status-form .preview-error {
1487 color: rgba
(185, 185, 186, 0.5);
1488 color: var
(--faint
, rgba
(185, 185, 186, 0.5));
1490 .post-status-form .preview-status {
1491 border: 1px solid
#222;
1492 border: 1px solid var
(--border
, #222);
1494 border-radius: var
(--tooltipRadius
, 5px);
1498 .post-status-form .text-format .only-format {
1499 color: rgba
(185, 185, 186, 0.5);
1500 color: var
(--faint
, rgba
(185, 185, 186, 0.5));
1502 .post-status-form .visibility-tray {
1503 display: -ms-flexbox
;
1505 -ms-flex-pack: justify
;
1506 justify-content: space-between
;
1508 -ms-flex-align: baseline
;
1509 align-items: baseline
;
1511 .post-status-form .media-upload-icon, .post-status-form .poll-icon, .post-status-form .emoji-icon {
1517 display: -ms-flexbox
;
1519 -ms-flex-align: center
;
1520 align-items: center
;
1522 .post-status-form .media-upload-icon.selected svg, .post-status-form .media-upload-icon.selected i, .post-status-form .media-upload-icon.selected label, .post-status-form .media-upload-icon:hover svg, .post-status-form .media-upload-icon:hover i, .post-status-form .media-upload-icon:hover label, .post-status-form .poll-icon.selected svg, .post-status-form .poll-icon.selected i, .post-status-form .poll-icon.selected label, .post-status-form .poll-icon:hover svg, .post-status-form .poll-icon:hover i, .post-status-form .poll-icon:hover label, .post-status-form .emoji-icon.selected svg, .post-status-form .emoji-icon.selected i, .post-status-form .emoji-icon.selected label, .post-status-form .emoji-icon:hover svg, .post-status-form .emoji-icon:hover i, .post-status-form .emoji-icon:hover label {
1524 color: var
(--lightText
, #b9b9ba);
1526 .post-status-form .media-upload-icon.disabled svg, .post-status-form .media-upload-icon.disabled i, .post-status-form .poll-icon.disabled svg, .post-status-form .poll-icon.disabled i, .post-status-form .emoji-icon.disabled svg, .post-status-form .emoji-icon.disabled i {
1527 cursor: not-allowed
;
1529 color: var
(--btnDisabledText
, #666);
1531 .post-status-form .media-upload-icon.disabled svg:hover, .post-status-form .media-upload-icon.disabled i:hover, .post-status-form .poll-icon.disabled svg:hover, .post-status-form .poll-icon.disabled i:hover, .post-status-form .emoji-icon.disabled svg:hover, .post-status-form .emoji-icon.disabled i:hover {
1533 color: var
(--btnDisabledText
, #666);
1535 .post-status-form .media-upload-icon {
1538 -ms-flex-pack: left
;
1539 justify-content: left
;
1541 .post-status-form .emoji-icon {
1544 -ms-flex-pack: center
;
1545 justify-content: center
;
1547 .post-status-form .poll-icon {
1550 -ms-flex-pack: right
;
1551 justify-content: right
;
1553 .post-status-form .error {
1556 .post-status-form .media-upload-wrapper {
1557 margin-right: 0.2em;
1558 margin-bottom: 0.5em;
1561 .post-status-form .media-upload-wrapper img, .post-status-form .media-upload-wrapper video {
1562 -o-object-fit: contain
;
1563 object-fit: contain
;
1566 .post-status-form .media-upload-wrapper .video {
1569 .post-status-form .media-upload-wrapper input {
1574 .post-status-form .status-input-wrapper {
1575 display: -ms-flexbox
;
1579 -ms-flex-direction: column
;
1580 flex-direction: column
;
1582 .post-status-form .btn[disabled] {
1583 cursor: not-allowed
;
1585 .post-status-form form {
1586 display: -ms-flexbox
;
1588 -ms-flex-direction: column
;
1589 flex-direction: column
;
1593 .post-status-form .form-group {
1594 display: -ms-flexbox
;
1596 -ms-flex-direction: column
;
1597 flex-direction: column
;
1598 padding: 0.25em 0.5em 0.5em;
1601 .post-status-form .form-post-body {
1602 box-sizing: content-box
;
1604 transition: min-height
200ms 100ms;
1605 padding-bottom: calc
(var
(--_padding
) + var
(--post-line-height
) * 1em);
1606 height: calc
(var
(--post-line-height
) * 1em);
1607 min-height: calc
(var
(--post-line-height
) * 1em);
1610 .post-status-form .form-post-body.scrollable-form {
1613 .post-status-form .main-input {
1616 .post-status-form .character-counter {
1623 .post-status-form .character-counter.error {
1625 color: var
(--cRed
, #ff0000);
1627 .post-status-form .btn[disabled] {
1628 cursor: not-allowed
;
1630 @keyframes fade-in
{
1638 @keyframes fade-out
{
1646 .post-status-form .drop-indicator {
1651 display: -ms-flexbox
;
1653 -ms-flex-align: center
;
1654 align-items: center
;
1655 -ms-flex-pack: center
;
1656 justify-content: center
;
1659 color: var
(--text
, #b9b9ba);
1660 background-color: #121a24;
1661 background-color: var
(--bg
, #121a24);
1663 border-radius: var
(--tooltipRadius
, 5px);
1664 border: 2px dashed
#b9b9ba;
1665 border: 2px dashed var
(--text
, #b9b9ba);
1670 .remote-follow .remote-button {
1674 .dark-overlay::before {
1683 background: rgba
(27, 31, 35, 0.5);
1686 .dialog-modal.panel {
1693 transform: translateX
(-50%);
1697 background-color: #121a24;
1698 background-color: var
(--bg
, #121a24);
1700 .dialog-modal.panel .dialog-modal-heading .title {
1703 .dialog-modal.panel .dialog-modal-content {
1706 background-color: #121a24;
1707 background-color: var
(--bg
, #121a24);
1708 white-space: normal
;
1710 .dialog-modal.panel .dialog-modal-footer {
1712 padding: 0.5em 0.5em;
1713 background-color: #121a24;
1714 background-color: var
(--bg
, #121a24);
1715 border-top: 1px solid
#222;
1716 border-top: 1px solid var
(--border
, #222);
1717 display: -ms-flexbox
;
1720 justify-content: flex-end
;
1722 .dialog-modal.panel .dialog-modal-footer button {
1724 margin-left: 0.5rem;
1727 .popover-trigger-button {
1728 display: inline-block
;
1736 transition: opacity
0.3s;
1738 border-radius: var
(--btnRadius
, 4px);
1739 background-color: #121a24;
1740 background-color: var
(--popover
, #121a24);
1742 color: var
(--popoverText
, #b9b9ba);
1743 --faint: var
(--popoverFaintText
, $fallback--faint
);
1744 --faintLink: var
(--popoverFaintLink
, $fallback--faint
);
1745 --lightText: var
(--popoverLightText
, $fallback--lightText
);
1746 --postLink: var
(--popoverPostLink
, $fallback--link
);
1747 --postFaintLink: var
(--popoverPostFaintLink
, $fallback--link
);
1748 --icon: var
(--popoverIcon
, $fallback--icon
);
1750 .popover-default:after {
1758 box-shadow: 1px 1px 4px rgba
(0, 0, 0, 0.6);
1759 box-shadow: var
(--panelShadow
);
1760 pointer-events: none
;
1770 white-space: nowrap
;
1772 .dropdown-menu .dropdown-divider {
1776 border-top: 1px solid
#222;
1777 border-top: 1px solid var
(--border
, #222);
1779 .dropdown-menu .dropdown-item {
1783 padding: 0.5em 0.75em;
1786 text-align: inherit
;
1787 white-space: nowrap
;
1790 background-color: transparent
;
1794 box-sizing: border-box
;
1795 --btnText: var
(--popoverText
, $fallback--text
);
1797 .dropdown-menu .dropdown-item-icon svg {
1799 margin-right: 0.75rem;
1800 color: var
(--menuPopoverIcon
, #666);
1802 .dropdown-menu .dropdown-item:active, .dropdown-menu .dropdown-item:hover {
1803 background-color: #151e2a;
1804 background-color: var
(--selectedMenuPopover
, #151e2a);
1806 --btnText: var
(--selectedMenuPopoverText
, $fallback--link
);
1807 --faint: var
(--selectedMenuPopoverFaintText
, $fallback--faint
);
1808 --faintLink: var
(--selectedMenuPopoverFaintLink
, $fallback--faint
);
1809 --lightText: var
(--selectedMenuPopoverLightText
, $fallback--lightText
);
1810 --icon: var
(--selectedMenuPopoverIcon
, $fallback--icon
);
1812 .dropdown-menu .dropdown-item:active svg, .dropdown-menu .dropdown-item:hover svg {
1813 color: var
(--selectedMenuPopoverIcon
, #666);
1814 --icon: var
(--selectedMenuPopoverIcon
, $fallback--icon
);
1816 .dropdown-menu .dropdown-item .menu-checkbox {
1817 display: inline-block
;
1818 vertical-align: middle
;
1826 background-color: #182230;
1827 background-color: var
(--input
, #182230);
1828 box-shadow: 0px 0px 2px black inset
;
1829 box-shadow: var
(--inputShadow
);
1830 margin-right: 0.75em;
1832 .dropdown-menu .dropdown-item .menu-checkbox.menu-checkbox-checked::after {
1836 .dropdown-menu .dropdown-item .menu-checkbox.-radio {
1837 border-radius: 9999px;
1839 .dropdown-menu .dropdown-item .menu-checkbox.-radio.menu-checkbox-checked::after {
1843 .dropdown-menu
.button-default
.dropdown-item
,
1844 .dropdown-menu .button-default.dropdown-item i[class*=icon-] {
1846 color: var
(--btnText
, #b9b9ba);
1848 .dropdown-menu .button-default.dropdown-item:active {
1849 background-color: #151e2a;
1850 background-color: var
(--selectedMenuPopover
, #151e2a);
1852 color: var
(--selectedMenuPopoverText
, #d8a070);
1854 .dropdown-menu .button-default.dropdown-item:disabled {
1856 color: var
(--btnDisabledText
, #b9b9ba);
1858 .dropdown-menu .button-default.dropdown-item.toggled {
1860 color: var
(--btnToggledText
, #b9b9ba);
1862 .moderation-tools-popover {
1865 .moderation-tools-popover .trigger {
1866 display: -ms-flexbox
!important
;
1867 display: flex
!important
;
1870 .moderation-tools-button svg, .moderation-tools-button i {
1873 .AccountActions .ellipsis-button {
1879 .AccountActions .ellipsis-button:not(:hover) .icon {
1881 color: var
(--lightText
, #b9b9ba);
1888 --_still-image-img-visibility: visible
;
1889 --_still-image-canvas-visibility: hidden
;
1890 --_still-image-label-visibility: hidden
;
1892 .user-card .panel-heading {
1896 background: transparent
;
1897 -ms-flex-direction: column
;
1898 flex-direction: column
;
1899 -ms-flex-align: stretch
;
1900 align-items: stretch
;
1903 .user-card .panel-body {
1904 word-wrap: break-word
;
1905 border-bottom-right-radius: inherit
;
1906 border-bottom-left-radius: inherit
;
1909 .user-card .background-image {
1915 -webkit-mask: linear-gradient
(to top
, white
, transparent
) bottom no-repeat
, linear-gradient
(to top
, white
, white
);
1916 mask: linear-gradient
(to top
, white
, transparent
) bottom no-repeat
, linear-gradient
(to top
, white
, white
);
1917 -webkit-mask-composite: xor
;
1918 mask-composite: exclude
;
1919 background-size: cover
;
1920 -webkit-mask-size: 100% 60%;
1921 mask-size: 100% 60%;
1922 border-top-left-radius: calc
(var
(--panelRadius
) - 1px);
1923 border-top-right-radius: calc
(var
(--panelRadius
) - 1px);
1924 background-color: var
(--profileBg
);
1927 .user-card .background-image.hide-bio {
1928 -webkit-mask-size: 100% 40px;
1929 mask-size: 100% 40px;
1940 color: var
(--postLink
, #d8a070);
1942 .user-card-bio img {
1943 -o-object-fit: contain
;
1944 object-fit: contain
;
1945 vertical-align: middle
;
1949 .user-card-rounded-t {
1950 border-top-left-radius: 10px;
1951 border-top-left-radius: var
(--panelRadius
, 10px);
1952 border-top-right-radius: 10px;
1953 border-top-right-radius: var
(--panelRadius
, 10px);
1955 .user-card-rounded {
1956 border-radius: 10px;
1957 border-radius: var
(--panelRadius
, 10px);
1959 .user-card-bordered {
1961 border-style: solid
;
1963 border-color: var
(--border
, #222);
1967 color: var
(--lightText
, #b9b9ba);
1970 .user-info .container {
1972 padding: 16px 0 6px;
1973 display: -ms-flexbox
;
1975 -ms-flex-align: start
;
1976 align-items: flex-start
;
1979 .user-info .container > * {
1982 .user-info .container .Avatar {
1983 --_avatarShadowBox: var
(--avatarShadow
);
1984 --_avatarShadowFilter: var
(--avatarShadowFilter
);
1985 --_avatarShadowInset: var
(--avatarShadowInset
);
1990 -o-object-fit: cover
;
1993 .user-info-avatar-link {
1997 .user-info-avatar-link-overlay {
2003 background-color: rgba
(0, 0, 0, 0.3);
2004 display: -ms-flexbox
;
2006 -ms-flex-pack: center
;
2007 justify-content: center
;
2008 -ms-flex-align: center
;
2009 align-items: center
;
2011 border-radius: var
(--avatarRadius
, 4px);
2013 transition: opacity
0.2s ease
;
2015 .user-info-avatar-link-overlay svg {
2018 .user-info-avatar-link:hover .user-info-avatar-link-overlay {
2021 .user-info .external-link-button, .user-info .edit-profile-button {
2028 .user-info .external-link-button:not(:hover) .icon, .user-info .edit-profile-button:not(:hover) .icon {
2030 color: var
(--lightText
, #b9b9ba);
2032 .user-info .user-summary {
2036 text-overflow: ellipsis
;
2037 white-space: nowrap
;
2042 --emoji-size: 1.7em;
2044 .user-info
.user-summary
.top-line
,
2045 .user-info .user-summary .bottom-line {
2046 display: -ms-flexbox
;
2049 .user-info .user-name {
2050 text-overflow: ellipsis
;
2057 .user-info .bottom-line {
2060 -ms-flex-align: baseline
;
2061 align-items: baseline
;
2063 .user-info .bottom-line .lock-icon {
2066 .user-info .bottom-line .user-screen-name {
2070 text-overflow: ellipsis
;
2073 color: var
(--lightText
, #b9b9ba);
2075 .user-info .bottom-line .dailyAvg {
2082 color: var
(--text
, #b9b9ba);
2084 .user-info .bottom-line .user-role {
2088 color: var
(--alertNeutralText
, #b9b9ba);
2089 background-color: #182230;
2090 background-color: var
(--alertNeutral
, #182230);
2092 .user-info .user-meta {
2093 margin-bottom: 0.15em;
2094 display: -ms-flexbox
;
2096 -ms-flex-align: baseline
;
2097 align-items: baseline
;
2099 -ms-flex-wrap: wrap
;
2102 .user-info .user-meta .following {
2106 margin-bottom: 0.25em;
2109 .user-info .user-meta .highlighter {
2112 display: -ms-flexbox
;
2114 -ms-flex-wrap: wrap
;
2116 margin-right: -0.5em;
2117 -ms-flex-item-align: start
;
2120 .user-info .user-meta .highlighter .userHighlightCl {
2125 .user-info .user-meta .highlighter .userHighlightSel {
2131 .user-info .user-meta .highlighter .userHighlightText {
2136 .user-info
.user-meta
.highlighter
.userHighlightCl
,
2137 .user-info
.user-meta
.highlighter
.userHighlightText
,
2138 .user-info .user-meta .highlighter .userHighlightSel {
2139 vertical-align: top
;
2140 margin-right: 0.5em;
2141 margin-bottom: 0.25em;
2143 .user-info .user-interactions {
2145 display: -ms-flexbox
;
2147 -ms-flex-flow: row wrap
;
2148 flex-flow: row wrap
;
2149 margin-right: -0.75em;
2151 .user-info .user-interactions > * {
2152 margin: 0 0.75em 0.6em 0;
2153 white-space: nowrap
;
2156 .user-info .user-interactions button {
2159 .sidebar .edit-profile-button {
2163 display: -ms-flexbox
;
2166 padding: 0.5em 1.5em 0em 1.5em;
2168 -ms-flex-pack: justify
;
2169 justify-content: space-between
;
2171 color: var
(--lightText
, #b9b9ba);
2172 -ms-flex-wrap: wrap
;
2178 padding: 0.5em 0 0.5em 0;
2183 font-weight: bolder
;
2187 text-decoration: none
;
2189 .user-panel .signed-in {
2195 box-shadow: var
(--panelShadow
);
2204 border-bottom: 1px solid
;
2206 border-color: var
(--border
, #222);
2209 .NavPanel li:first-child .menu-item {
2210 border-top-right-radius: 10px;
2211 border-top-right-radius: var
(--panelRadius
, 10px);
2212 border-top-left-radius: 10px;
2213 border-top-left-radius: var
(--panelRadius
, 10px);
2215 .NavPanel li:last-child .menu-item {
2216 border-bottom-right-radius: 10px;
2217 border-bottom-right-radius: var
(--panelRadius
, 10px);
2218 border-bottom-left-radius: 10px;
2219 border-bottom-left-radius: var
(--panelRadius
, 10px);
2221 .NavPanel li:last-child {
2224 .NavPanel .menu-item {
2226 box-sizing: border-box
;
2232 color: var
(--link
, #d8a070);
2234 .NavPanel .menu-item:hover {
2235 background-color: #151e2a;
2236 background-color: var
(--selectedMenu
, #151e2a);
2238 color: var
(--selectedMenuText
, #d8a070);
2239 --faint: var
(--selectedMenuFaintText
, $fallback--faint
);
2240 --faintLink: var
(--selectedMenuFaintLink
, $fallback--faint
);
2241 --lightText: var
(--selectedMenuLightText
, $fallback--lightText
);
2242 --icon: var
(--selectedMenuIcon
, $fallback--icon
);
2244 .NavPanel .menu-item.router-link-active {
2245 font-weight: bolder
;
2246 background-color: #151e2a;
2247 background-color: var
(--selectedMenu
, #151e2a);
2249 color: var
(--selectedMenuText
, #b9b9ba);
2250 --faint: var
(--selectedMenuFaintText
, $fallback--faint
);
2251 --faintLink: var
(--selectedMenuFaintLink
, $fallback--faint
);
2252 --lightText: var
(--selectedMenuLightText
, $fallback--lightText
);
2253 --icon: var
(--selectedMenuIcon
, $fallback--icon
);
2255 .NavPanel .menu-item.router-link-active:hover {
2256 text-decoration: underline
;
2258 .NavPanel .timelines-chevron {
2262 .NavPanel .timelines-background {
2263 padding: 0 0 0 0.6em;
2264 background-color: #151e2a;
2265 background-color: var
(--selectedMenu
, #151e2a);
2266 border-top: 1px solid
;
2268 border-color: var
(--border
, #222);
2270 .NavPanel .timelines {
2271 background-color: #121a24;
2272 background-color: var
(--bg
, #121a24);
2274 .NavPanel .fa-scale-110 {
2275 margin-right: 0.8em;
2282 .features-panel li {
2286 vertical-align: middle
;
2288 .who-to-follow img {
2296 .who-to-follow-items {
2297 white-space: nowrap
;
2299 text-overflow: ellipsis
;
2303 .who-to-follow-more {
2314 .floating-shout.-left {
2317 .floating-shout:not(.-left) {
2320 .shout-panel .shout-heading {
2323 .shout-panel .shout-heading .icon {
2325 color: var
(--panelText
, #b9b9ba);
2326 margin-right: 0.5em;
2328 .shout-panel .shout-heading .title {
2329 display: -ms-flexbox
;
2331 -ms-flex-pack: justify
;
2332 justify-content: space-between
;
2333 -ms-flex-align: center
;
2334 align-items: center
;
2336 .shout-panel .shout-window {
2341 .shout-panel .shout-window-container {
2344 .shout-panel .shout-message {
2345 display: -ms-flexbox
;
2347 padding: 0.2em 0.5em;
2349 .shout-panel .shout-avatar img {
2353 border-radius: var
(--avatarRadius
, 4px);
2354 margin-right: 0.5em;
2357 .shout-panel .shout-input {
2358 display: -ms-flexbox
;
2361 .shout-panel .shout-input textarea {
2368 .shout-panel .shout-panel .title {
2369 display: -ms-flexbox
;
2371 -ms-flex-pack: justify
;
2372 justify-content: space-between
;
2381 display: -ms-flexbox
;
2383 -ms-flex-pack: center
;
2384 justify-content: center
;
2385 -ms-flex-align: center
;
2386 align-items: center
;
2388 pointer-events: none
;
2389 animation-duration: 0.2s;
2390 animation-name: modal-background-fadein
;
2394 pointer-events: initial
;
2396 .modal-view.modal-background {
2397 pointer-events: initial
;
2398 background-color: rgba
(0, 0, 0, 0.5);
2403 @keyframes modal-background-fadein
{
2405 background-color: rgba
(0, 0, 0, 0);
2408 background-color: rgba
(0, 0, 0, 0.5);
2412 display: -ms-flexbox
;
2415 -ms-flex-align: center
;
2416 align-items: center
;
2417 -ms-flex-pack: center
;
2418 justify-content: center
;
2421 color: var
(--text
, #b9b9ba);
2423 .panel-loading .loading-text svg {
2425 vertical-align: middle
;
2427 color: var
(--text
, #b9b9ba);
2429 .async-component-error {
2430 display: -ms-flexbox
;
2433 -ms-flex-align: center
;
2434 align-items: center
;
2435 -ms-flex-pack: center
;
2436 justify-content: center
;
2438 .async-component-error .btn {
2445 .settings-modal
.setting-list
,
2446 .settings-modal .option-list {
2447 list-style-type: none
;
2450 .settings-modal
.setting-list li
,
2451 .settings-modal .option-list li {
2452 margin-bottom: 0.5em;
2454 .settings-modal
.setting-list
.suboptions
,
2455 .settings-modal .option-list .suboptions {
2458 .settings-modal.peek .settings-modal-panel {
2460 * Modal is positioned vertically centered.
2461 * 100vh - 100% = Distance between modal's top+bottom boundaries and screen
2462 * (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
2463 * + 100% - we move modal completely off-screen, it's top boundary touches
2464 * bottom of the screen
2465 * - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible
2467 transform: translateY
(calc
(((100vh - 100%) / 2 + 100%) - 50px));
2469 @media all and
(max-width: 800px) {
2470 .settings-modal.peek .settings-modal-panel {
2471 /* For mobile, the modal takes 100% of the available screen.
2472 This ensures the minimized modal is always 50px above the browser bottom bar regardless of whether or not it is visible.
2474 transform: translateY
(calc
(100% - 50px));
2477 .settings-modal .settings-modal-panel {
2479 transition: transform
;
2480 transition-timing-function: ease-in-out
;
2481 transition-duration: 300ms;
2486 @media all and
(max-width: 800px) {
2487 .settings-modal .settings-modal-panel {
2492 .settings-modal .settings-modal-panel > .panel-body {
2496 .settings-modal .settings-modal-panel > .panel-body .btn {
2501 .settings-modal .settings-footer {
2502 display: -ms-flexbox
;
2505 .settings-modal .settings-footer > * {
2506 margin-right: 0.5em;
2508 .settings-modal .settings-footer .extra-content {
2509 display: -ms-flexbox
;
2511 -ms-flex-positive: 1;
2514 .modal-view.media-modal-view {
2516 -ms-flex-direction: column
;
2517 flex-direction: column
;
2520 .modal-view
.media-modal-view
.modal-view-button-arrow
,
2521 .modal-view.media-modal-view .modal-view-button-hide {
2524 .modal-view
.media-modal-view
.modal-view-button-arrow:focus
, .modal-view
.media-modal-view
.modal-view-button-arrow:hover
,
2525 .modal-view
.media-modal-view
.modal-view-button-hide:focus
,
2526 .modal-view.media-modal-view .modal-view-button-hide:hover {
2530 .modal-view
.media-modal-view
.modal-view-button-arrow:hover
,
2531 .modal-view.media-modal-view .modal-view-button-hide:hover {
2534 @keyframes media-fadein
{
2542 .media-modal-view .modal-image-container {
2543 display: -ms-flexbox
;
2546 -ms-flex-align: center
;
2547 align-items: center
;
2548 -ms-flex-direction: column
;
2549 flex-direction: column
;
2554 -ms-flex-positive: 1;
2556 -ms-flex-pack: center
;
2557 justify-content: center
;
2559 .media-modal-view .modal-image-container-inner {
2562 -ms-flex-positive: 1;
2564 display: -ms-flexbox
;
2566 -ms-flex-direction: column
;
2567 flex-direction: column
;
2568 -ms-flex-align: center
;
2569 align-items: center
;
2570 -ms-flex-pack: center
;
2571 justify-content: center
;
2573 .media-modal-view
.description
,
2574 .media-modal-view .counter {
2575 /* Hardcoded since background is also hardcoded */
2578 text-shadow: 0 0 10px black
, 0 0 10px black
;
2581 .media-modal-view .description {
2588 word-break: break-all
;
2590 .media-modal-view .modal-image {
2593 image-orientation: from-image
;
2594 animation: 0.1s cubic-bezier
(0.7, 0, 1, 0.6) media-fadein
;
2596 .media-modal-view .modal-image.loading {
2599 .media-modal-view .loading-spinner {
2603 pointer-events: none
;
2604 display: -ms-flexbox
;
2606 -ms-flex-pack: center
;
2607 justify-content: center
;
2608 -ms-flex-align: center
;
2609 align-items: center
;
2611 .media-modal-view .loading-spinner svg {
2614 .media-modal-view .modal-view-button {
2620 -webkit-appearance: none
;
2621 -moz-appearance: none
;
2625 transition: opacity
333ms cubic-bezier
(0.4, 0, 0.22, 1);
2629 .media-modal-view .modal-view-button .button-icon {
2637 background-color: rgba
(0, 0, 0, 0.3);
2639 .media-modal-view .modal-view-button-arrow {
2643 margin-top: calc
(3em / 2);
2647 .media-modal-view .modal-view-button-arrow .arrow-icon {
2653 background-color: rgba
(0, 0, 0, 0.3);
2655 .media-modal-view .modal-view-button-arrow--prev {
2658 .media-modal-view .modal-view-button-arrow--prev .arrow-icon {
2661 .media-modal-view .modal-view-button-arrow--next {
2664 .media-modal-view .modal-view-button-arrow--next .arrow-icon {
2667 .media-modal-view .modal-view-button-hide {
2672 .media-modal-view .modal-view-button-hide .button-icon {
2676 .side-drawer-container {
2683 display: -ms-flexbox
;
2685 -ms-flex-align: stretch
;
2686 align-items: stretch
;
2687 transition-duration: 0s;
2688 transition-property: transform
;
2690 .side-drawer-container-open {
2691 transform: translate
(0%);
2693 .side-drawer-container-closed {
2694 transition-delay: 0.35s;
2695 transform: translate
(-100%);
2697 .side-drawer-darken {
2705 transition-property: background-color
;
2706 background-color: rgba
(0, 0, 0, 0.5);
2708 .side-drawer-darken-closed {
2709 background-color: rgba
(0, 0, 0, 0);
2711 .side-drawer-click-outside {
2717 transition-timing-function: cubic-bezier
(0, 1, 0.5, 1);
2719 transition-property: transform
;
2720 margin: 0 0 0 -100px;
2721 padding: 0 0 1em 100px;
2726 box-shadow: 1px 1px 4px rgba
(0, 0, 0, 0.6);
2727 box-shadow: var
(--panelShadow
);
2728 background-color: #121a24;
2729 background-color: var
(--popover
, #121a24);
2731 color: var
(--popoverText
, #d8a070);
2732 --faint: var
(--popoverFaintText
, $fallback--faint
);
2733 --faintLink: var
(--popoverFaintLink
, $fallback--faint
);
2734 --lightText: var
(--popoverLightText
, $fallback--lightText
);
2735 --icon: var
(--popoverIcon
, $fallback--icon
);
2737 .side-drawer .badge {
2740 .side-drawer-logo-wrapper {
2741 display: -ms-flexbox
;
2743 -ms-flex-align: center
;
2744 align-items: center
;
2747 .side-drawer-logo-wrapper img {
2751 margin-right: 0.85em;
2753 .side-drawer-logo-wrapper span {
2755 text-overflow: ellipsis
;
2756 white-space: nowrap
;
2758 .side-drawer-click-outside-closed {
2762 .side-drawer-closed {
2763 transform: translate
(-100%);
2765 .side-drawer-heading {
2766 background: transparent
;
2767 -ms-flex-direction: column
;
2768 flex-direction: column
;
2769 -ms-flex-align: stretch
;
2770 align-items: stretch
;
2771 display: -ms-flexbox
;
2780 border-bottom: 1px solid
;
2782 border-color: var
(--border
, #222);
2784 .side-drawer ul:last-child {
2790 .side-drawer li a, .side-drawer li button {
2791 box-sizing: border-box
;
2797 .side-drawer li a:hover, .side-drawer li button:hover {
2798 background-color: #151e2a;
2799 background-color: var
(--selectedMenuPopover
, #151e2a);
2801 color: var
(--selectedMenuPopoverText
, #b9b9ba);
2802 --faint: var
(--selectedMenuPopoverFaintText
, $fallback--faint
);
2803 --faintLink: var
(--selectedMenuPopoverFaintLink
, $fallback--faint
);
2804 --lightText: var
(--selectedMenuPopoverLightText
, $fallback--lightText
);
2805 --icon: var
(--selectedMenuPopoverIcon
, $fallback--icon
);
2807 .MobilePostButton.button-default {
2810 border-radius: 100%;
2814 background-color: #182230;
2815 background-color: var
(--btn
, #182230);
2816 display: -ms-flexbox
;
2818 -ms-flex-pack: center
;
2819 justify-content: center
;
2820 -ms-flex-align: center
;
2821 align-items: center
;
2822 box-shadow: 0px 2px 2px rgba
(0, 0, 0, 0.3), 0px 4px 6px rgba
(0, 0, 0, 0.3);
2824 transition: 0.35s transform
;
2825 transition-timing-function: cubic-bezier
(0, 1, 0.5, 1);
2827 .MobilePostButton.hidden {
2828 transform: translateY
(150%);
2830 .MobilePostButton svg {
2833 color: var
(--text
, #b9b9ba);
2835 @media all and
(min-width: 801px) {
2836 .new-status-button:not(.always-show) {
2841 display: -ms-flexbox
;
2844 .ReplyButton > :first-child {
2846 margin: -10px -8px -10px -10px;
2848 .ReplyButton .action-counter {
2849 pointer-events: none
;
2850 -webkit-user-select: none
;
2851 -moz-user-select: none
;
2852 -ms-user-select: none
;
2855 .ReplyButton .interactive:hover .svg-inline--fa, .ReplyButton .interactive.-active .svg-inline--fa {
2857 color: var
(--cBlue
, #0095ff);
2860 display: -ms-flexbox
;
2863 .FavoriteButton > :first-child {
2865 margin: -10px -8px -10px -10px;
2867 .FavoriteButton .action-counter {
2868 pointer-events: none
;
2869 -webkit-user-select: none
;
2870 -moz-user-select: none
;
2871 -ms-user-select: none
;
2874 .FavoriteButton .interactive .svg-inline--fa {
2875 animation-duration: 0.6s;
2877 .FavoriteButton .interactive:hover .svg-inline--fa, .FavoriteButton .interactive.-favorited .svg-inline--fa {
2879 color: var
(--cOrange
, orange
);
2882 width: 30px !important
;
2885 /* override of popover internal stuff */
2887 .ReactButton .reaction-picker-filter {
2889 display: -ms-flexbox
;
2892 .ReactButton .reaction-picker-filter input {
2896 .ReactButton .reaction-picker-divider {
2900 background-color: var
(--border
, #222);
2902 .ReactButton .reaction-picker {
2907 display: -ms-flexbox
;
2909 -ms-flex-wrap: wrap
;
2913 -ms-flex-line-pack: start
;
2914 align-content: flex-start
;
2915 -webkit-user-select: none
;
2916 -moz-user-select: none
;
2917 -ms-user-select: none
;
2919 -webkit-mask: linear-gradient
(to top
, white
0, transparent
100%) bottom no-repeat
, linear-gradient
(to bottom
, white
0, transparent
100%) top no-repeat
, linear-gradient
(to top
, white
, white
);
2920 mask: linear-gradient
(to top
, white
0, transparent
100%) bottom no-repeat
, linear-gradient
(to bottom
, white
0, transparent
100%) top no-repeat
, linear-gradient
(to top
, white
, white
);
2921 transition: -webkit-mask-size
150ms;
2922 transition: mask-size
150ms;
2923 transition: mask-size
150ms, -webkit-mask-size
150ms;
2924 -webkit-mask-size: 100% 20px, 100% 20px, auto
;
2925 mask-size: 100% 20px, 100% 20px, auto
;
2926 /* Autoprefixed seem to ignore this one, and also syntax is different */
2927 -webkit-mask-composite: xor
;
2928 mask-composite: exclude
;
2930 .ReactButton .reaction-picker .emoji-button {
2932 -ms-flex-preferred-size: 20%;
2935 -ms-flex-line-pack: center
;
2936 align-content: center
;
2938 .ReactButton .reaction-picker .emoji-button:hover {
2939 transform: scale
(1.25);
2941 .ReactButton .popover-trigger-button {
2944 .ReactButton .popover-trigger {
2948 .ReactButton .popover-trigger:hover .svg-inline--fa {
2950 color: var
(--text
, #b9b9ba);
2953 display: -ms-flexbox
;
2956 .RetweetButton > :first-child {
2958 margin: -10px -8px -10px -10px;
2960 .RetweetButton .action-counter {
2961 pointer-events: none
;
2962 -webkit-user-select: none
;
2963 -moz-user-select: none
;
2964 -ms-user-select: none
;
2967 .RetweetButton .interactive .svg-inline--fa {
2968 animation-duration: 0.6s;
2970 .RetweetButton .interactive:hover .svg-inline--fa, .RetweetButton .interactive.-repeated .svg-inline--fa {
2972 color: var
(--cGreen
, #0fa00f);
2975 /* override of popover internal stuff */
2977 .ExtraButtons .popover-trigger-button {
2980 .ExtraButtons .popover-trigger {
2985 .ExtraButtons .popover-trigger:hover .svg-inline--fa {
2987 color: var
(--text
, #b9b9ba);
2990 display: -ms-flexbox
;
2994 -ms-flex-wrap: wrap
;
2998 .avatars .avatars-item {
2999 margin: 0 0 5px 5px;
3001 .avatars .avatars-item:first-child {
3004 .avatars .avatars-item .avatar-small {
3005 border-radius: 10px;
3006 border-radius: var
(--avatarAltRadius
, 10px);
3010 /* popover styles load on-demand, so we need to override */
3011 .status-popover.popover {
3016 border-color: var
(--border
, #222);
3017 border-style: solid
;
3020 border-radius: var
(--tooltipRadius
, 5px);
3021 box-shadow: 2px 2px 3px rgba
(0, 0, 0, 0.5);
3022 box-shadow: var
(--popupShadow
);
3023 /* TODO cleanup this */
3025 .status-popover.popover .Status.Status {
3028 .status-popover.popover .status-preview-no-content {
3032 .status-popover.popover .status-preview-no-content i {
3035 .user-list-popover {
3039 .user-list-popover .user-list-row {
3041 display: -ms-flexbox
;
3043 -ms-flex-direction: row
;
3044 flex-direction: row
;
3046 .user-list-popover .user-list-row .user-list-names {
3047 display: -ms-flexbox
;
3049 -ms-flex-direction: column
;
3050 flex-direction: column
;
3054 .user-list-popover .user-list-row .user-list-names img {
3058 .user-list-popover .user-list-row .user-list-screen-name {
3062 display: -ms-flexbox
;
3065 -ms-flex-wrap: wrap
;
3073 margin-right: 0.5em;
3075 display: -ms-flexbox
;
3077 -ms-flex-align: center
;
3078 align-items: center
;
3079 -ms-flex-pack: center
;
3080 justify-content: center
;
3081 box-sizing: border-box
;
3083 .emoji-reaction .reaction-emoji {
3084 width: 2.55em !important
;
3085 margin-right: 0.25em;
3087 .emoji-reaction:focus {
3090 .emoji-reaction.not-clickable {
3093 .emoji-reaction.not-clickable:hover {
3094 box-shadow: 0px 0px 2px 0px black
, 0px 1px 0px 0px rgba
(255, 255, 255, 0.2) inset
, 0px -1px 0px 0px rgba
(0, 0, 0, 0.2) inset
;
3095 box-shadow: var
(--buttonShadow
);
3097 .emoji-reaction-expand {
3099 margin-right: 0.5em;
3101 display: -ms-flexbox
;
3103 -ms-flex-align: center
;
3104 align-items: center
;
3105 -ms-flex-pack: center
;
3106 justify-content: center
;
3108 .emoji-reaction-expand:hover {
3109 text-decoration: underline
;
3112 border: 1px solid var
(--accent
, #d8a070);
3114 margin-right: calc
(0.5em - 1px);
3118 white-space: normal
;
3119 word-wrap: break-word
;
3120 word-break: break-word
;
3123 --_still-image-img-visibility: visible
;
3124 --_still-image-canvas-visibility: hidden
;
3125 --_still-image-label-visibility: hidden
;
3128 background-color: #151e2a;
3129 background-color: var
(--selectedPost
, #151e2a);
3131 color: var
(--selectedPostText
, #b9b9ba);
3132 --lightText: var
(--selectedPostLightText
, $fallback--light
);
3133 --faint: var
(--selectedPostFaintText
, $fallback--faint
);
3134 --faintLink: var
(--selectedPostFaintLink
, $fallback--faint
);
3135 --postLink: var
(--selectedPostPostLink
, $fallback--faint
);
3136 --postFaintLink: var
(--selectedPostFaintPostLink
, $fallback--faint
);
3137 --icon: var
(--selectedPostIcon
, $fallback--icon
);
3139 .Status .gravestone {
3140 padding: var
(--status-margin
, 0.75em);
3141 color: rgba
(185, 185, 186, 0.5);
3142 color: var
(--faint
, rgba
(185, 185, 186, 0.5));
3143 display: -ms-flexbox
;
3146 .Status .gravestone .deleted-text {
3148 -ms-flex-align: center
;
3149 align-items: center
;
3151 .Status .status-container {
3152 display: -ms-flexbox
;
3154 padding: var
(--status-margin
, 0.75em);
3156 .Status .status-container > * {
3159 .Status .status-container.-repeat {
3163 padding: var
(--status-margin
, 0.75em) var
(--status-margin
, 0.75em) 0;
3164 display: -ms-flexbox
;
3166 -ms-flex-align: center
;
3167 align-items: center
;
3169 justify-content: flex-end
;
3171 ._misclick-prevention .Status {
3172 pointer-events: none
;
3174 ._misclick-prevention .Status .attachments {
3175 pointer-events: initial
;
3178 .Status .left-side {
3179 margin-right: var
(--status-margin
, 0.75em);
3181 .Status .right-side {
3187 margin-bottom: var
(--status-margin
, 0.75em);
3189 .Status .status-username {
3190 white-space: nowrap
;
3194 -ms-flex-negative: 1;
3196 margin-right: 0.4em;
3197 text-overflow: ellipsis
;
3198 --_still_image-label-scale: 0.25;
3201 .Status .status-favicon {
3204 margin-right: 0.4em;
3206 .Status .status-heading {
3207 margin-bottom: 0.5em;
3209 .Status .heading-name-row {
3210 display: -ms-flexbox
;
3212 -ms-flex-pack: justify
;
3213 justify-content: space-between
;
3216 .Status .heading-name-row a {
3217 display: inline-block
;
3218 word-break: break-all
;
3220 .Status .account-name {
3222 margin-right: 0.4em;
3223 white-space: nowrap
;
3225 text-overflow: ellipsis
;
3229 .Status .heading-left {
3230 display: -ms-flexbox
;
3234 .Status .heading-right {
3235 display: -ms-flexbox
;
3237 -ms-flex-negative: 0;
3240 .Status .heading-right .button-unstyled {
3244 .Status .heading-right .button-unstyled:hover svg {
3246 color: var
(--lightText
, #b9b9ba);
3248 .Status .heading-right .svg-inline--fa {
3249 margin-left: 0.25em;
3251 .Status .glued-label {
3252 display: -ms-inline-flexbox
;
3253 display: inline-flex
;
3254 white-space: nowrap
;
3257 margin-right: 0.2em;
3259 .Status .heading-reply-row {
3261 -ms-flex-line-pack: baseline
;
3262 align-content: baseline
;
3267 -ms-flex-align: stretch
;
3268 align-items: stretch
;
3270 .Status .reply-to-popover, .Status .reply-to-no-popover, .Status .mentions {
3272 margin-right: 0.4em;
3273 -ms-flex-negative: 0;
3276 .Status .reply-glued-label {
3277 margin-right: 0.5em;
3279 .Status .reply-to-popover .reply-to:hover::before {
3285 border-bottom: 1px solid var
(--faint
);
3286 pointer-events: none
;
3288 .Status .reply-to-popover .faint-link:hover {
3289 text-decoration: none
;
3291 .Status .reply-to-popover.-strikethrough .reply-to::after {
3297 border-bottom: 1px solid var
(--faint
);
3298 pointer-events: none
;
3300 .Status .mentions, .Status .reply-to {
3301 white-space: nowrap
;
3304 .Status .mentions-text, .Status .reply-to-text {
3305 color: var
(--faint
);
3307 text-overflow: ellipsis
;
3308 white-space: nowrap
;
3310 .Status .mentions-line {
3317 display: -ms-flexbox
;
3319 -ms-flex-wrap: wrap
;
3322 .Status .replies > * {
3323 margin-right: 0.4em;
3325 .Status .reply-link {
3328 .Status .repeat-info {
3329 padding: 0.4em var
(--status-margin
, 0.75em);
3331 .Status .repeat-info .repeat-icon {
3333 color: var
(--cGreen
, #0fa00f);
3335 .Status .repeater-avatar {
3336 border-radius: var
(--avatarAltRadius
, 10px);
3341 .Status .repeater-name {
3342 text-overflow: ellipsis
;
3345 .Status .repeater-name .emoji {
3348 vertical-align: middle
;
3349 -o-object-fit: contain
;
3350 object-fit: contain
;
3352 .Status .status-fadein {
3353 animation-duration: 0.4s;
3354 animation-name: fadein
;
3364 .Status .status-actions {
3367 display: -ms-flexbox
;
3369 margin-top: var
(--status-margin
, 0.75em);
3371 .Status .status-actions > * {
3377 padding: 0.25em 0.6em;
3380 text-overflow: ellipsis
;
3382 display: -ms-flexbox
;
3384 -ms-flex-wrap: nowrap
;
3387 .Status .muted .status-username, .Status .muted .mute-thread, .Status .muted .mute-words {
3390 white-space: nowrap
;
3392 .Status .muted .status-username, .Status .muted .mute-words {
3393 text-overflow: ellipsis
;
3396 .Status .muted .status-username {
3397 font-weight: normal
;
3400 margin-right: 0.2em;
3403 .Status .muted .mute-thread {
3407 .Status .muted .mute-words {
3412 .Status .muted .mute-words::before {
3415 .Status .muted .unmute {
3421 .Status .reply-form {
3425 .Status .reply-body {
3429 .Status .favs-repeated-users {
3430 margin-top: var
(--status-margin
, 0.75em);
3434 display: -ms-flexbox
;
3438 .Status .avatar-row {
3443 display: -ms-flexbox
;
3445 -ms-flex-align: center
;
3446 align-items: center
;
3448 .Status .avatar-row::before {
3454 background-color: var
(--faint
, rgba
(185, 185, 186, 0.5));
3456 .Status .stat-count {
3457 margin-right: var
(--status-margin
, 0.75em);
3458 -webkit-user-select: none
;
3459 -moz-user-select: none
;
3460 -ms-user-select: none
;
3463 .Status .stat-count .stat-title {
3464 color: var
(--faint
, rgba
(185, 185, 186, 0.5));
3466 text-transform: uppercase
;
3469 .Status .stat-count .stat-number {
3470 font-weight: bolder
;
3474 .Status .stat-count:hover .stat-title {
3475 text-decoration: underline
;
3477 @media all and
(max-width: 800px) {
3478 .Status .repeater-avatar {
3481 .Status .post-avatar {
3485 .Status .post-avatar.-compact {
3491 border-bottom: 1px solid
;
3493 border-color: var
(--border
, #222);
3494 word-wrap: break-word
;
3495 word-break: break-word
;
3498 .Notification:hover {
3499 --_still-image-img-visibility: visible
;
3500 --_still-image-canvas-visibility: hidden
;
3501 --_still-image-label-visibility: hidden
;
3503 .Notification.-muted {
3504 padding: 0.25em 0.6em;
3507 text-overflow: ellipsis
;
3509 display: -ms-flexbox
;
3511 -ms-flex-wrap: nowrap
;
3514 .Notification.-muted .status-username, .Notification.-muted .mute-thread, .Notification.-muted .mute-words {
3517 white-space: nowrap
;
3519 .Notification.-muted .status-username, .Notification.-muted .mute-words {
3520 text-overflow: ellipsis
;
3523 .Notification.-muted .status-username {
3524 font-weight: normal
;
3527 margin-right: 0.2em;
3530 .Notification.-muted .mute-thread {
3534 .Notification.-muted .mute-words {
3539 .Notification.-muted .mute-words::before {
3542 .Notification.-muted .unmute {
3548 .Notification .type-icon {
3551 .Notification.-type--repeat .type-icon {
3553 color: var
(--cGreen
, #0fa00f);
3555 .Notification.-type--follow .type-icon {
3557 color: var
(--cBlue
, #0095ff);
3559 .Notification.-type--follow-request .type-icon {
3561 color: var
(--cBlue
, #0095ff);
3563 .Notification.-type--like .type-icon {
3566 color: var
(--cOrange
, orange
);
3568 .Notification.-type--move .type-icon {
3570 color: var
(--cBlue
, #0095ff);
3572 .NotificationFilters {
3573 -ms-flex-item-align: stretch
;
3574 -ms-grid-row-align: stretch
;
3575 align-self: stretch
;
3577 .NotificationFilters > button {
3580 width: var
(--__panel-heading-height-inner
);
3583 .NotificationFilters > button svg {
3586 .Notifications:not(.minimal) {
3587 padding-bottom: 15em;
3589 .Notifications .loadmore-error {
3591 color: var
(--text
, #b9b9ba);
3593 .Notifications .notification {
3596 .Notifications .notification .notification-overlay {
3602 pointer-events: none
;
3604 .Notifications .notification.unseen .notification-overlay {
3605 background-image: linear-gradient
(135deg, var
(--badgeNotification
, #ff0000) 4px, transparent
10px);
3608 box-sizing: border-box
;
3609 /* TODO cleanup this */
3611 .notification:hover .animated.Avatar canvas {
3614 .notification:hover .animated.Avatar img {
3615 visibility: visible
;
3617 .notification:last-child .Notification {
3618 border-bottom: none
;
3620 .notification .non-mention {
3621 display: -ms-flexbox
;
3625 -ms-flex-wrap: nowrap
;
3629 --link: var
(--faintLink
);
3630 --text: var
(--faint
);
3632 .notification .non-mention .avatar-container {
3636 .notification .follow-request-accept:hover {
3638 color: var
(--text
, #b9b9ba);
3640 .notification .follow-request-reject:hover {
3642 color: var
(--cRed
, #ff0000);
3644 .notification .follow-text, .notification .move-text {
3646 overflow-wrap: break-word
;
3647 display: -ms-flexbox
;
3649 -ms-flex-pack: justify
;
3650 justify-content: space-between
;
3652 .notification .follow-text .follow-name, .notification .move-text .follow-name {
3656 text-overflow: ellipsis
;
3657 white-space: nowrap
;
3659 .notification .Status {
3663 .notification time {
3664 white-space: nowrap
;
3666 .notification .notification-right {
3669 padding-left: 0.8em;
3672 .notification .notification-right .timeago {
3676 .notification .emoji-reaction-emoji {
3679 .notification .notification-details {
3681 word-wrap: break-word
;
3682 line-height: var
(--post-line-height
);
3688 display: -ms-flexbox
;
3690 -ms-flex-wrap: nowrap
;
3692 -ms-flex-pack: justify
;
3693 justify-content: space-between
;
3695 .notification .notification-details .name-and-action {
3699 text-overflow: ellipsis
;
3701 .notification .notification-details .username {
3702 font-weight: bolder
;
3704 text-overflow: ellipsis
;
3705 white-space: nowrap
;
3707 .notification .notification-details .timeago {
3708 margin-right: 0.2em;
3710 .notification .notification-details .status-content {
3714 .notification .notification-details h1 {
3715 word-break: break-all
;
3721 .notification .notification-details h1 small {
3722 font-weight: lighter
;
3724 .notification .notification-details p {
3727 margin-bottom: 0.3em;
3729 .MobileNav .mobile-nav {
3732 line-height: var
(--navbar-height
);
3733 -ms-grid-rows: 50px;
3734 grid-template-rows: 50px;
3735 -ms-grid-columns: 2fr auto
;
3736 grid-template-columns: 2fr auto
;
3738 box-sizing: border-box
;
3740 .MobileNav .mobile-nav a {
3741 color: var
(--topBarLink
, #d8a070);
3743 .MobileNav .mobile-inner-nav {
3745 display: -ms-flexbox
;
3747 -ms-flex-align: center
;
3748 align-items: center
;
3750 .MobileNav .mobile-nav-button {
3751 display: inline-block
;
3757 .MobileNav .site-name {
3759 display: inline-block
;
3762 /* moslty just to get rid of extra whitespaces */
3763 display: -ms-flexbox
;
3766 .MobileNav .alert-dot {
3767 border-radius: 100%;
3771 left: calc
(50% - 4px);
3772 top: calc
(50% - 4px);
3775 background-color: #ff0000;
3776 background-color: var
(--badgeNotification
, #ff0000);
3778 .MobileNav .mobile-notifications-drawer {
3785 box-shadow: 1px 1px 4px rgba
(0, 0, 0, 0.6);
3786 box-shadow: var
(--panelShadow
);
3787 transition-property: transform
;
3788 transition-duration: 0.25s;
3789 transform: translateX
(0);
3791 -webkit-overflow-scrolling: touch
;
3793 .MobileNav .mobile-notifications-drawer.-closed {
3794 transform: translateX
(100%);
3797 .MobileNav .mobile-notifications-header {
3798 display: -ms-flexbox
;
3800 -ms-flex-align: center
;
3801 align-items: center
;
3802 -ms-flex-pack: justify
;
3803 justify-content: space-between
;
3809 color: var
(--topBarText
);
3810 background-color: #182230;
3811 background-color: var
(--topBar
, #182230);
3812 box-shadow: 0px 0px 4px rgba
(0, 0, 0, 0.6);
3813 box-shadow: var
(--topBarShadow
);
3815 .MobileNav .mobile-notifications-header .title {
3819 .MobileNav .mobile-notifications {
3822 height: calc
(100vh - var
(--navbar-height
));
3826 color: var
(--text
, #b9b9ba);
3827 background-color: #121a24;
3828 background-color: var
(--bg
, #121a24);
3830 .MobileNav .mobile-notifications .notifications {
3835 .MobileNav .mobile-notifications .notifications .panel {
3840 .MobileNav .mobile-notifications .notifications .panel:after {
3843 .MobileNav .mobile-notifications .notifications .panel .panel-heading {
3848 display: -ms-inline-flexbox
;
3849 display: inline-flex
;
3850 -ms-flex-align: baseline
;
3851 align-items: baseline
;
3852 vertical-align: baseline
;
3854 justify-content: flex-end
;
3856 .SearchBar.-expanded {
3859 .SearchBar
.search-bar-input
,
3860 .SearchBar .search-button {
3863 .SearchBar .search-bar-input {
3867 .SearchBar .cancel-search {
3870 .SearchBar .cancel-icon {
3872 color: var
(--btnTopBarText
, #b9b9ba);
3878 color: var
(--topBarLink
, #d8a070);
3880 .DesktopNav .inner-nav {
3883 -ms-grid-rows: var
(--navbar-height
);
3884 grid-template-rows: var
(--navbar-height
);
3885 -ms-grid-columns: 2fr auto
2fr;
3886 grid-template-columns: 2fr auto
2fr;
3887 grid-template-areas: "sitename logo actions";
3888 box-sizing: border-box
;
3893 .DesktopNav.-logoLeft .inner-nav {
3894 -ms-grid-columns: auto
2fr 2fr;
3895 grid-template-columns: auto
2fr 2fr;
3896 grid-template-areas: "logo sitename actions";
3898 .DesktopNav .button-default, .DesktopNav .button-default svg {
3900 color: var
(--btnTopBarText
, #b9b9ba);
3902 .DesktopNav .button-default:active {
3903 background-color: #182230;
3904 background-color: var
(--btnPressedTopBar
, #182230);
3906 color: var
(--btnPressedTopBarText
, #b9b9ba);
3908 .DesktopNav .button-default:disabled {
3910 color: var
(--btnDisabledTopBarText
, #b9b9ba);
3912 .DesktopNav .button-default.toggled {
3914 color: var
(--btnToggledTopBarText
, #b9b9ba);
3915 background-color: #182230;
3916 background-color: var
(--btnToggledTopBar
, #182230);
3921 transition: opacity
;
3922 transition-timing-function: ease-out
;
3923 transition-duration: 100ms;
3925 @media all and
(min-width: 800px) {
3927 opacity: 1 !important
;
3930 .DesktopNav .logo .mask {
3931 -webkit-mask-repeat: no-repeat
;
3932 mask-repeat: no-repeat
;
3933 -webkit-mask-position: center
;
3934 mask-position: center
;
3935 -webkit-mask-size: contain
;
3937 background-color: #182230;
3938 background-color: var
(--topBarText
, #182230);
3945 .DesktopNav .logo img {
3946 display: inline-block
;
3947 height: var
(--navbar-height
);
3949 .DesktopNav .nav-icon {
3955 .DesktopNav .nav-icon .svg-inline--fa {
3957 color: var
(--topBarLink
, #d8a070);
3959 .DesktopNav .sitename {
3960 grid-area: sitename
;
3962 .DesktopNav .actions {
3968 line-height: var
(--navbar-height
);
3969 height: var
(--navbar-height
);
3971 display: -ms-flexbox
;
3973 -ms-flex-wrap: wrap
;
3976 .DesktopNav .item.right {
3978 justify-content: flex-end
;
3981 .list-item:not(:last-child) {
3982 border-bottom: 1px solid
;
3983 border-bottom-color: #222;
3984 border-bottom-color: var
(--border
, #222);
3986 .list-empty-content {
3990 .user-reporting-panel {
3996 .user-reporting-panel .panel-body {
3997 display: -ms-flexbox
;
3999 -ms-flex-direction: column-reverse
;
4000 flex-direction: column-reverse
;
4001 border-top: 1px solid
;
4003 border-color: var
(--border
, #222);
4006 .user-reporting-panel-left {
4007 padding: 1.1em 0.7em 0.7em;
4008 line-height: var
(--post-line-height
);
4009 box-sizing: border-box
;
4011 .user-reporting-panel-left > div {
4014 .user-reporting-panel-left > div:last-child {
4017 .user-reporting-panel-left p {
4020 .user-reporting-panel-left textarea.form-control {
4024 transition: min-height
200ms 100ms;
4028 .user-reporting-panel-left .btn {
4032 .user-reporting-panel-left .alert {
4036 .user-reporting-panel-right {
4037 display: -ms-flexbox
;
4039 -ms-flex-direction: column
;
4040 flex-direction: column
;
4043 .user-reporting-panel-sitem {
4044 display: -ms-flexbox
;
4046 -ms-flex-pack: justify
;
4047 justify-content: space-between
;
4048 /* TODO cleanup this */
4050 .user-reporting-panel-sitem > .Status {
4054 .user-reporting-panel-sitem > .checkbox {
4057 @media all and
(min-width: 801px) {
4058 .user-reporting-panel .panel-body {
4059 -ms-flex-direction: row
;
4060 flex-direction: row
;
4062 .user-reporting-panel-left {
4065 border-right: 1px solid
;
4067 border-color: var
(--border
, #222);
4070 .user-reporting-panel-left > div {
4073 .user-reporting-panel-right {
4077 margin-bottom: 12px;
4080 .modal-view.post-form-modal-view {
4081 -ms-flex-align: start
;
4082 align-items: flex-start
;
4084 .post-form-modal-panel {
4085 -ms-flex-negative: 0;
4092 @media (orientation: landscape
) {
4093 .post-form-modal-panel {
4097 .global-notice-list {
4101 pointer-events: none
;
4103 display: -ms-flexbox
;
4105 -ms-flex-direction: column
;
4106 flex-direction: column
;
4107 -ms-flex-align: center
;
4108 align-items: center
;
4110 .global-notice-list .global-notice {
4111 pointer-events: auto
;
4114 max-width: calc
(100% - 3em);
4115 display: -ms-flexbox
;
4117 padding-left: 1.5em;
4119 margin-bottom: 0.5em;
4121 .global-notice-list .global-notice .notice-message {
4125 .global-notice-list .global-error {
4126 background-color: var
(--alertPopupError
, #ff0000);
4127 color: var
(--alertPopupErrorText
, #b9b9ba);
4129 .global-notice-list .global-error .svg-inline--fa {
4130 color: var
(--alertPopupErrorText
, #b9b9ba);
4132 .global-notice-list .global-warning {
4133 background-color: var
(--alertPopupWarning
, orange
);
4134 color: var
(--alertPopupWarningText
, #b9b9ba);
4136 .global-notice-list .global-warning .svg-inline--fa {
4137 color: var
(--alertPopupWarningText
, #b9b9ba);
4139 .global-notice-list .global-success {
4140 background-color: var
(--alertPopupSuccess
, #0fa00f);
4141 color: var
(--alertPopupSuccessText
, #b9b9ba);
4143 .global-notice-list .global-success .svg-inline--fa {
4144 color: var
(--alertPopupSuccessText
, #b9b9ba);
4146 .global-notice-list .global-info {
4147 background-color: var
(--alertPopupNeutral
, #182230);
4148 color: var
(--alertPopupNeutralText
, #b9b9ba);
4150 .global-notice-list .global-info .svg-inline--fa {
4151 color: var
(--alertPopupNeutralText
, #b9b9ba);
4153 .global-notice-list .close-notice {
4154 padding-right: 0.2em;
4156 .global-notice-list .close-notice .svg-inline--fa:hover {
4161 --navbar-height: 3.5rem;
4162 --post-line-height: 1.4;
4168 font-family: sans-serif
;
4169 font-family: var
(--interfaceFont
, sans-serif
);
4172 color: var
(--text
, #b9b9ba);
4173 -webkit-font-smoothing: antialiased
;
4174 -moz-osx-font-smoothing: grayscale
;
4175 overscroll-behavior-y: none
;
4182 @media (any-pointer: fine
) {
4184 scrollbar-color: var
(--btn
) transparent
;
4186 *::-webkit-scrollbar
{
4187 background: transparent
;
4189 *::-webkit-scrollbar-button
, *::-webkit-scrollbar-thumb
{
4190 background-color: var
(--btn
);
4191 box-shadow: var
(--buttonShadow
);
4192 border-radius: var
(--btnRadius
);
4194 *::-webkit-scrollbar-button
{
4195 --___bgPadding: 2px;
4196 color: var
(--btnText
);
4197 background-repeat: no-repeat
, no-repeat
;
4199 *::-webkit-scrollbar-button:horizontal
{
4200 background-size: 50% calc
(50% - var
(--___bgPadding
)), 50% calc
(50% - var
(--___bgPadding
));
4202 *::-webkit-scrollbar-button:horizontal:increment
{
4203 background-image: linear-gradient
(45deg, var
(--btnText
) 50%, transparent
51%), linear-gradient
(-45deg, transparent
50%, var
(--btnText
) 51%);
4204 background-position: top var
(--___bgPadding
) left
50%, right
50% bottom var
(--___bgPadding
);
4206 *::-webkit-scrollbar-button:horizontal:decrement
{
4207 background-image: linear-gradient
(45deg, transparent
50%, var
(--btnText
) 51%), linear-gradient
(-45deg, var
(--btnText
) 50%, transparent
51%);
4208 background-position: bottom var
(--___bgPadding
) right
50%, left
50% top var
(--___bgPadding
);
4210 *::-webkit-scrollbar-button:vertical
{
4211 background-size: calc
(50% - var
(--___bgPadding
)) 50%, calc
(50% - var
(--___bgPadding
)) 50%;
4213 *::-webkit-scrollbar-button:vertical:increment
{
4214 background-image: linear-gradient
(-45deg, transparent
50%, var
(--btnText
) 51%), linear-gradient
(45deg, transparent
50%, var
(--btnText
) 51%);
4215 background-position: right var
(--___bgPadding
) top
50%, left var
(--___bgPadding
) top
50%;
4217 *::-webkit-scrollbar-button:vertical:decrement
{
4218 background-image: linear-gradient
(-45deg, var
(--btnText
) 50%, transparent
51%), linear-gradient
(45deg, var
(--btnText
) 50%, transparent
51%);
4219 background-position: left var
(--___bgPadding
) top
50%, right var
(--___bgPadding
) top
50%;
4222 scrollbar-color: var
(--selectedMenu
) var
(--wallpaper
);
4223 background: var
(--wallpaper
);
4227 text-decoration: none
;
4229 color: var
(--link
, #d8a070);
4237 color: var
(--icon
, #666);
4241 color: var
(--topBarText
);
4242 background-color: #182230;
4243 background-color: var
(--topBar
, #182230);
4244 color: rgba
(185, 185, 186, 0.5);
4245 color: var
(--faint
, rgba
(185, 185, 186, 0.5));
4246 box-shadow: 0 0 4px rgba
(0, 0, 0, 0.6);
4247 box-shadow: var
(--topBarShadow
);
4248 box-sizing: border-box
;
4249 height: var
(--navbar-height
);
4255 .column.-scrollable {
4256 top: var
(--navbar-height
);
4257 position: -webkit-sticky
;
4270 top: var
(--navbar-height
);
4274 background-size: cover
;
4275 background-repeat: no-repeat
;
4276 background-color: var
(--wallpaper
);
4277 background-image: var
(--body-background-image
);
4278 background-position: 50%;
4282 grid-column-start: 1;
4283 -ms-grid-column-span: 3;
4284 grid-column-end: span
3;
4288 pointer-events: none
;
4289 background-color: rgba
(0, 0, 0, 0.15);
4290 background-color: var
(--underlay
, rgba
(0, 0, 0, 0.15));
4294 --miniColumn: 25rem;
4295 --maxiColumn: minmax
(var
(--miniColumn
), 45rem);
4297 --status-margin: 0.75em;
4301 -ms-grid-columns: var
(--miniColumn
) var
(--maxiColumn
);
4302 grid-template-columns: var
(--miniColumn
) var
(--maxiColumn
);
4303 grid-template-areas: "sidebar content";
4305 grid-template-rows: 1fr;
4306 box-sizing: border-box
;
4308 -ms-flex-line-pack: start
;
4309 align-content: flex-start
;
4310 -ms-flex-wrap: wrap
;
4312 -ms-flex-pack: center
;
4313 justify-content: center
;
4317 .app-layout .column {
4318 --___columnMargin: var
(--columnGap
);
4321 -ms-grid-columns: 100%;
4322 grid-template-columns: 100%;
4323 box-sizing: border-box
;
4327 margin: 0 calc
(var
(--___columnMargin
) / 2);
4328 padding: calc
(var
(--___columnMargin
)) 0;
4329 row-gap: var
(--___columnMargin
);
4330 -ms-flex-line-pack: start
;
4331 align-content: start
;
4333 .app-layout .column:not(.-scrollable) {
4334 margin-top: var
(--navbar-height
);
4336 .app-layout .column:hover {
4339 .app-layout .column.-full-height {
4344 .app-layout .column.-scrollable {
4345 --___paddingIncrease: calc
(var
(--columnGap
) / 2);
4346 position: -webkit-sticky
;
4348 top: var
(--navbar-height
);
4349 max-height: calc
(100vh - var
(--navbar-height
));
4352 margin-left: calc
(var
(--___paddingIncrease
) * -1);
4353 padding-left: calc
(var
(--___paddingIncrease
) + var
(--___columnMargin
) / 2);
4355 @supports (scrollbar-width: none
) or
(-webkit-text-fill-color: initial
) {
4356 .app-layout .column.-scrollable:not(.-show-scrollbar) {
4357 scrollbar-width: none
;
4358 margin-right: calc
(var
(--___paddingIncrease
) * -1);
4359 padding-right: calc
(var
(--___paddingIncrease
) + var
(--___columnMargin
) / 2);
4361 .app-layout .column.-scrollable:not(.-show-scrollbar)::-webkit-scrollbar {
4366 .app-layout .column.-scrollable .panel-heading.-sticky {
4367 top: calc
(var
(--columnGap
) / -1);
4369 .app-layout.-has-new-post-button .column {
4370 padding-bottom: 10rem;
4372 .app-layout.-no-sticky-headers .column .panel-heading.-sticky {
4376 .app-layout .column-inner {
4379 -ms-grid-columns: 100%;
4380 grid-template-columns: 100%;
4381 box-sizing: border-box
;
4383 -ms-flex-line-pack: start
;
4384 align-content: start
;
4386 .app-layout.-reverse:not(.-wide):not(.-mobile) {
4387 -ms-grid-columns: var
(--maxiColumn
) var
(--miniColumn
);
4388 grid-template-columns: var
(--maxiColumn
) var
(--miniColumn
);
4389 grid-template-areas: "content sidebar";
4392 -ms-grid-columns: var
(--miniColumn
) var
(--maxiColumn
) var
(--miniColumn
);
4393 grid-template-columns: var
(--miniColumn
) var
(--maxiColumn
) var
(--miniColumn
);
4394 grid-template-areas: "sidebar content notifs";
4396 .app-layout.-wide.-reverse {
4397 grid-template-areas: "notifs content sidebar";
4399 .app-layout.-mobile {
4400 -ms-grid-columns: 100vw;
4401 grid-template-columns: 100vw;
4402 grid-template-areas: "content";
4405 .app-layout.-mobile .column {
4409 margin-top: var
(--navbar-height
);
4412 .app-layout
.-mobile
.panel-heading
,
4413 .app-layout
.-mobile
.panel-heading::after
,
4414 .app-layout
.-mobile
.panel-heading::before
,
4415 .app-layout
.-mobile
.panel
,
4416 .app-layout.-mobile .panel::after {
4417 border-top-left-radius: 0;
4418 border-top-right-radius: 0;
4420 .app-layout
.-mobile
.underlay
,
4421 .app-layout
.-mobile #sidebar
,
4422 .app-layout.-mobile #notifs-column {
4425 .app-layout.-normal #notifs-column {
4432 -webkit-user-select: none
;
4433 -moz-user-select: none
;
4434 -ms-user-select: none
;
4437 color: var
(--btnText
, #b9b9ba);
4438 background-color: #182230;
4439 background-color: var
(--btn
, #182230);
4442 border-radius: var
(--btnRadius
, 4px);
4444 box-shadow: 0px 0px 2px 0px black
, 0px 1px 0px 0px rgba
(255, 255, 255, 0.2) inset
, 0px -1px 0px 0px rgba
(0, 0, 0, 0.2) inset
;
4445 box-shadow: var
(--buttonShadow
);
4447 font-family: sans-serif
;
4448 font-family: var
(--interfaceFont
, sans-serif
);
4450 .button-default.-sublime {
4451 background: transparent
;
4453 .button-default i
[class
*=icon-
],
4454 .button-default .svg-inline--fa {
4456 color: var
(--btnText
, #b9b9ba);
4458 .button-default::-moz-focus-inner {
4461 .button-default:hover {
4462 box-shadow: 0 0 4px rgba
(255, 255, 255, 0.3);
4463 box-shadow: var
(--buttonHoverShadow
);
4465 .button-default:active {
4466 box-shadow: 0 0 4px 0 rgba
(255, 255, 255, 0.3), 0 1px 0 0 rgba
(0, 0, 0, 0.2) inset
, 0 -1px 0 0 rgba
(255, 255, 255, 0.2) inset
;
4467 box-shadow: var
(--buttonPressedShadow
);
4469 color: var
(--btnPressedText
, #b9b9ba);
4470 background-color: #182230;
4471 background-color: var
(--btnPressed
, #182230);
4473 .button-default:active svg
,
4474 .button-default:active i {
4476 color: var
(--btnPressedText
, #b9b9ba);
4478 .button-default:disabled {
4479 cursor: not-allowed
;
4481 color: var
(--btnDisabledText
, #b9b9ba);
4482 background-color: #182230;
4483 background-color: var
(--btnDisabled
, #182230);
4485 .button-default:disabled svg
,
4486 .button-default:disabled i {
4488 color: var
(--btnDisabledText
, #b9b9ba);
4490 .button-default.toggled {
4492 color: var
(--btnToggledText
, #b9b9ba);
4493 background-color: #182230;
4494 background-color: var
(--btnToggled
, #182230);
4495 box-shadow: 0 0 4px 0 rgba
(255, 255, 255, 0.3), 0 1px 0 0 rgba
(0, 0, 0, 0.2) inset
, 0 -1px 0 0 rgba
(255, 255, 255, 0.2) inset
;
4496 box-shadow: var
(--buttonPressedShadow
);
4498 .button-default
.toggled svg
,
4499 .button-default.toggled i {
4501 color: var
(--btnToggledText
, #b9b9ba);
4503 .button-default.danger {
4505 color: var
(--alertErrorPanelText
, #b9b9ba);
4506 background-color: rgba
(211, 16, 20, 0.5);
4507 background-color: var
(--alertError
, rgba
(211, 16, 20, 0.5));
4514 text-align: initial
;
4516 font-family: inherit
;
4520 box-sizing: content-box
;
4523 .button-unstyled.-link {
4525 color: var
(--link
, #d8a070);
4527 .button-unstyled.-fullwidth {
4530 .button-unstyled.-hover-highlight:hover svg {
4532 color: var
(--lightText
, #b9b9ba);
4540 border-radius: var
(--inputRadius
, 4px);
4541 box-shadow: 0 1px 0 0 rgba
(0, 0, 0, 0.2) inset
, 0 -1px 0 0 rgba
(255, 255, 255, 0.2) inset
, 0 0 2px 0 black inset
;
4542 box-shadow: var
(--inputShadow
);
4543 background-color: #182230;
4544 background-color: var
(--input
, #182230);
4546 color: var
(--inputText
, #b9b9ba);
4547 font-family: sans-serif
;
4548 font-family: var
(--inputFont
, sans-serif
);
4551 box-sizing: border-box
;
4552 display: inline-block
;
4555 -webkit-hyphens: none
;
4558 padding: 0 var
(--_padding
);
4568 input:disabled
, input
[disabled
=disabled
], input
.disabled
,
4570 textarea
[disabled
=disabled
],
4573 .input
[disabled
=disabled
],
4575 cursor: not-allowed
;
4579 textarea
[type
=range
],
4580 .input[type=range] {
4589 textarea
[type
=radio
],
4590 .input[type=radio] {
4593 input
[type
=radio
]:checked
+ label::before
,
4594 textarea
[type
=radio
]:checked
+ label::before
,
4595 .input[type=radio]:checked + label::before {
4596 box-shadow: 0 0 2px black inset
, 0 0 0 4px #182230 inset
;
4597 box-shadow: var
(--inputShadow
), 0 0 0 4px var
(--fg
, #182230) inset
;
4598 background-color: var
(--accent
, #d8a070);
4600 input
[type
=radio
]:disabled
, input
[type
=radio
]:disabled
+ label
, input
[type
=radio
]:disabled
+ label::before
,
4601 textarea
[type
=radio
]:disabled
,
4602 textarea
[type
=radio
]:disabled
+ label
,
4603 textarea
[type
=radio
]:disabled
+ label::before
,
4604 .input
[type
=radio
]:disabled
,
4605 .input
[type
=radio
]:disabled
+ label
,
4606 .input[type=radio]:disabled + label::before {
4609 input
[type
=radio
] + label::before
,
4610 textarea
[type
=radio
] + label::before
,
4611 .input[type=radio] + label::before {
4612 -ms-flex-negative: 0;
4614 display: inline-block
;
4616 transition: box-shadow
200ms;
4619 border-radius: 100%;
4620 box-shadow: 0 0 2px black inset
;
4621 box-shadow: var
(--inputShadow
);
4622 margin-right: 0.5em;
4623 background-color: #182230;
4624 background-color: var
(--input
, #182230);
4625 vertical-align: top
;
4629 box-sizing: border-box
;
4633 input
[type
=checkbox
],
4634 textarea
[type
=checkbox
],
4635 .input[type=checkbox] {
4638 input
[type
=checkbox
]:checked
+ label::before
,
4639 textarea
[type
=checkbox
]:checked
+ label::before
,
4640 .input[type=checkbox]:checked + label::before {
4642 color: var
(--inputText
, #b9b9ba);
4644 input
[type
=checkbox
]:disabled
, input
[type
=checkbox
]:disabled
+ label
, input
[type
=checkbox
]:disabled
+ label::before
,
4645 textarea
[type
=checkbox
]:disabled
,
4646 textarea
[type
=checkbox
]:disabled
+ label
,
4647 textarea
[type
=checkbox
]:disabled
+ label::before
,
4648 .input
[type
=checkbox
]:disabled
,
4649 .input
[type
=checkbox
]:disabled
+ label
,
4650 .input[type=checkbox]:disabled + label::before {
4653 input
[type
=checkbox
] + label::before
,
4654 textarea
[type
=checkbox
] + label::before
,
4655 .input[type=checkbox] + label::before {
4656 -ms-flex-negative: 0;
4658 display: inline-block
;
4660 transition: color
200ms;
4664 border-radius: var
(--checkboxRadius
, 2px);
4665 box-shadow: 0 0 2px black inset
;
4666 box-shadow: var
(--inputShadow
);
4667 margin-right: 0.5em;
4668 background-color: #182230;
4669 background-color: var
(--input
, #182230);
4670 vertical-align: top
;
4674 box-sizing: border-box
;
4678 input
.resize-height
,
4679 textarea
.resize-height
,
4680 .input.resize-height {
4684 padding: var
(--_padding
);
4685 line-height: var
(--post-line-height
);
4689 color: var
(--text
, #b9b9ba);
4690 background-color: #121a24;
4691 background-color: var
(--bg
, #121a24);
4693 .hide-number-spinner {
4694 -moz-appearance: textfield
;
4696 .hide-number-spinner[type=number]::-webkit-inner-spin-button, .hide-number-spinner[type=number]::-webkit-outer-spin-button {
4706 display: -ms-inline-flexbox
;
4707 display: inline-flex
;
4708 vertical-align: middle
;
4715 .btn-group button:not(:last-child) {
4716 border-top-right-radius: 0;
4717 border-bottom-right-radius: 0;
4719 .btn-group button:not(:first-child) {
4720 border-top-left-radius: 0;
4721 border-bottom-left-radius: 0;
4725 display: -ms-flexbox
;
4727 -ms-flex-direction: column
;
4728 flex-direction: column
;
4729 background-color: #121a24;
4730 background-color: var
(--bg
, #121a24);
4732 .panel::after, .panel {
4733 border-radius: 10px;
4734 border-radius: var
(--panelRadius
, 10px);
4744 box-shadow: 1px 1px 4px rgba
(0, 0, 0, 0.6);
4745 box-shadow: var
(--panelShadow
);
4746 pointer-events: none
;
4749 padding: var
(--panel-body-padding
, 0);
4751 .panel-body:empty::before {
4752 content: "\AF\\_(\30C4)_/\AF";
4764 --panel-heading-height-padding: 0.6em;
4765 --__panel-heading-height: 3.2em;
4766 --__panel-heading-height-inner: calc
(var
(--__panel-heading-height
) - 2 * var
(--panel-heading-height-padding
));
4768 box-sizing: border-box
;
4771 grid-auto-flow: column
;
4772 -ms-grid-columns: minmax
(50%, 1fr);
4773 grid-template-columns: minmax
(50%, 1fr);
4774 grid-auto-columns: auto
;
4775 grid-column-gap: 0.5em;
4778 background-size: cover
;
4780 height: var
(--__panel-heading-height
);
4781 line-height: var
(--__panel-heading-height-inner
);
4784 .panel-heading
.-flexible-height
,
4785 .panel-footer.-flexible-height {
4786 --__panel-heading-height: auto
;
4788 .panel-heading
.-flexible-height::after
, .panel-heading
.-flexible-height::before
,
4789 .panel-footer
.-flexible-height::after
,
4790 .panel-footer.-flexible-height::before {
4793 .panel-heading
.-stub
, .panel-heading
.-stub::after
,
4794 .panel-footer
.-stub
,
4795 .panel-footer.-stub::after {
4796 border-radius: 10px;
4797 border-radius: var
(--panelRadius
, 10px);
4799 .panel-heading
.-sticky
,
4800 .panel-footer.-sticky {
4801 position: -webkit-sticky
;
4803 top: var
(--navbar-height
);
4805 .panel-heading::after
, .panel-heading::before
,
4806 .panel-footer::after
,
4807 .panel-footer::before {
4814 pointer-events: none
;
4816 .panel-heading
.title
,
4817 .panel-footer .title {
4820 .panel-heading
.alert
,
4821 .panel-footer .alert {
4822 white-space: nowrap
;
4823 text-overflow: ellipsis
;
4826 .panel-heading:not
(.-flexible-height
) > .button-default
,
4827 .panel-heading:not
(.-flexible-height
) > .alert
,
4828 .panel-footer:not
(.-flexible-height
) > .button-default
,
4829 .panel-footer:not(.-flexible-height) > .alert {
4830 height: var
(--__panel-heading-height-inner
);
4832 box-sizing: border-box
;
4837 -ms-flex-item-align: stretch
;
4838 -ms-grid-row-align: stretch
;
4839 align-self: stretch
;
4842 border-radius: 10px 10px 0 0;
4843 border-radius: var
(--panelRadius
, 10px) var
(--panelRadius
, 10px) 0 0;
4844 border-width: 0 0 1px 0;
4845 -ms-flex-align: start
;
4847 color: var
(--panelText
);
4848 background-color: #121a24;
4849 background-color: var
(--bg
, #121a24);
4851 .panel-heading::after {
4852 background-color: #182230;
4853 background-color: var
(--panel
, #182230);
4855 border-radius: 10px 10px 0 0;
4856 border-radius: var
(--panelRadius
, 10px) var
(--panelRadius
, 10px) 0 0;
4857 box-shadow: var
(--panelHeaderShadow
);
4860 .panel-heading .-link {
4862 color: var
(--panelLink
, #d8a070);
4864 .panel-heading .faint {
4865 background-color: transparent
;
4866 color: rgba
(185, 185, 186, 0.5);
4867 color: var
(--panelFaint
, rgba
(185, 185, 186, 0.5));
4869 .panel-heading .faint-link {
4870 color: rgba
(185, 185, 186, 0.5);
4871 color: var
(--faintLink
, rgba
(185, 185, 186, 0.5));
4873 .panel-heading:not(.-flexible-height) > .button-default {
4874 -ms-flex-negative: 0;
4877 .panel-heading:not
(.-flexible-height
) > .button-default
,
4878 .panel-heading:not(.-flexible-height) > .button-default i[class*=icon-] {
4880 color: var
(--btnPanelText
, #b9b9ba);
4882 .panel-heading:not(.-flexible-height) > .button-default:active {
4883 background-color: #182230;
4884 background-color: var
(--btnPressedPanel
, #182230);
4886 color: var
(--btnPressedPanelText
, #b9b9ba);
4888 .panel-heading:not(.-flexible-height) > .button-default:disabled {
4890 color: var
(--btnDisabledPanelText
, #b9b9ba);
4892 .panel-heading:not(.-flexible-height) > .button-default.toggled {
4894 color: var
(--btnToggledPanelText
, #b9b9ba);
4897 border-radius: 0 0 10px 10px;
4898 border-radius: 0 0 var
(--panelRadius
, 10px) var
(--panelRadius
, 10px);
4899 -ms-flex-align: center
;
4900 align-items: center
;
4901 border-width: 1px 0 0 0;
4902 border-style: solid
;
4903 border-color: var
(--border
, #222);
4912 box-sizing: border-box
;
4913 display: inline-block
;
4914 border-radius: 99px;
4918 padding: 0.15em 0.15em;
4919 vertical-align: middle
;
4920 font-weight: normal
;
4925 white-space: nowrap
;
4927 text-overflow: ellipsis
;
4929 .badge.badge-notification {
4930 background-color: #ff0000;
4931 background-color: var
(--badgeNotification
, #ff0000);
4933 color: var
(--badgeNotificationText
, white
);
4939 border-radius: var
(--tooltipRadius
, 5px);
4942 background-color: rgba
(211, 16, 20, 0.5);
4943 background-color: var
(--alertError
, rgba
(211, 16, 20, 0.5));
4945 color: var
(--alertErrorText
, #b9b9ba);
4947 .panel-heading .alert.error {
4949 color: var
(--alertErrorPanelText
, #b9b9ba);
4952 background-color: rgba
(111, 111, 20, 0.5);
4953 background-color: var
(--alertWarning
, rgba
(111, 111, 20, 0.5));
4955 color: var
(--alertWarningText
, #b9b9ba);
4957 .panel-heading .alert.warning {
4959 color: var
(--alertWarningPanelText
, #b9b9ba);
4962 background-color: var
(--alertSuccess
, rgba
(111, 111, 20, 0.5));
4963 color: var
(--alertSuccessText
, #b9b9ba);
4965 .panel-heading .alert.success {
4966 color: var
(--alertSuccessPanelText
, #b9b9ba);
4969 color: rgba
(185, 185, 186, 0.5);
4970 color: var
(--faint
, rgba
(185, 185, 186, 0.5));
4973 color: rgba
(185, 185, 186, 0.5);
4974 color: var
(--faint
, rgba
(185, 185, 186, 0.5));
4977 text-decoration: underline
;
4979 .visibility-notice {
4981 border: 1px solid rgba
(185, 185, 186, 0.5);
4982 border: 1px solid var
(--faint
, rgba
(185, 185, 186, 0.5));
4984 border-radius: var
(--inputRadius
, 4px);
4986 .notice-dismissible {
4987 padding-right: 4rem;
4990 .notice-dismissible .dismiss {
4997 .fa-scale-110.svg-inline--fa {
5000 .fa-old-padding.svg-inline--fa {
5006 @media all and
(min-width: 801px) {
5012 display: inline-block
;
5016 .btn.button-default {
5019 .new-status-notification {
5026 @media all and
(max-width: 800px) {
5033 transform: rotate
(0deg);
5036 transform: rotate
(359deg);
5039 @keyframes shakeError
{
5041 transform: translateX
(0);
5044 transform: translateX
(0.375rem);
5047 transform: translateX
(-0.375rem);
5050 transform: translateX
(0.375rem);
5053 transform: translateX
(-0.375rem);
5056 transform: translateX
(0.375rem);
5059 transform: translateX
(-0.375rem);
5062 transform: translateX
(0);
5066 .fade-leave-active {
5067 transition: opacity
0.2s;
5070 .fade-leave-active {
5073 .thread-tree-replies {
5074 margin-left: var
(--status-margin
, 0.75em);
5075 border-left: 2px solid var
(--border
, #222);
5077 .thread-tree-replies-hidden {
5078 padding: var
(--status-margin
, 0.75em);
5079 /* Make the button stretch along the whole row */
5080 display: -ms-flexbox
;
5082 -ms-flex-align: stretch
;
5083 align-items: stretch
;
5084 -ms-flex-direction: column
;
5085 flex-direction: column
;
5089 /* expanded conversation in timeline */
5091 .Conversation .conversation-dive-to-top-level-box {
5092 padding: var
(--status-margin
, 0.75em);
5093 border-bottom-width: 1px;
5094 border-bottom-style: solid
;
5095 border-bottom-color: var
(--border
, #222);
5097 /* Make the button stretch along the whole row */
5098 display: -ms-flexbox
;
5100 -ms-flex-align: stretch
;
5101 align-items: stretch
;
5102 -ms-flex-direction: column
;
5103 flex-direction: column
;
5105 .Conversation .thread-ancestors {
5106 margin-left: var
(--status-margin
, 0.75em);
5107 border-left: 2px solid var
(--border
, #222);
5109 .Conversation .thread-ancestor.-faded .StatusContent {
5110 --link: var
(--faintLink
);
5111 --text: var
(--faint
);
5114 .Conversation .thread-ancestor-dive-box {
5115 padding-left: var
(--status-margin
, 0.75em);
5116 border-bottom-width: 1px;
5117 border-bottom-style: solid
;
5118 border-bottom-color: var
(--border
, #222);
5120 /* Make the button stretch along the whole row */
5122 .Conversation .thread-ancestor-dive-box, .Conversation .thread-ancestor-dive-box-inner {
5123 display: -ms-flexbox
;
5125 -ms-flex-align: stretch
;
5126 align-items: stretch
;
5127 -ms-flex-direction: column
;
5128 flex-direction: column
;
5130 .Conversation .thread-ancestor-dive-box-inner {
5131 padding: var
(--status-margin
, 0.75em);
5133 .Conversation .conversation-status {
5134 border-bottom-width: 1px;
5135 border-bottom-style: solid
;
5136 border-bottom-color: var
(--border
, #222);
5139 .Conversation
.thread-ancestor-has-other-replies
.conversation-status
,
5140 .Conversation
.thread-ancestor:last-child
.conversation-status
,
5141 .Conversation .thread-ancestor:last-child .thread-ancestor-dive-box, .Conversation:last-child .conversation-status, .Conversation.-expanded .thread-tree .conversation-status {
5142 border-bottom: none
;
5144 .Conversation .thread-ancestors + .thread-tree > .conversation-status {
5145 border-top-width: 1px;
5146 border-top-style: solid
;
5147 border-top-color: var
(--border
, #222);
5149 .Conversation.status-fadein.-expanded .thread-body {
5150 border-left-width: 4px;
5151 border-left-style: solid
;
5152 border-left-color: #ff0000;
5153 border-left-color: var
(--cRed
, #ff0000);
5154 border-radius: 0 0 10px 10px;
5155 border-radius: 0 0 var
(--panelRadius
, 10px) var
(--panelRadius
, 10px);
5156 border-bottom: 1px solid var
(--border
, #222);
5158 .Conversation.-expanded.status-fadein {
5159 margin: calc
(var
(--status-margin
, $status-margin
) / 2);
5162 -ms-flex-negative: 1;
5168 .TimelineMenu .popover-trigger-button {
5169 vertical-align: bottom
;
5171 .TimelineMenu .timeline-menu-popover-wrap {
5174 padding: 0 15px 15px 15px;
5176 .TimelineMenu .timeline-menu-popover {
5181 border-top-right-radius: 0;
5182 border-top-left-radius: 0;
5183 transform: translateY
(-100%);
5184 transition: transform
100ms;
5186 .TimelineMenu .panel::after {
5187 border-top-right-radius: 0;
5188 border-top-left-radius: 0;
5190 .TimelineMenu.open .timeline-menu-popover {
5191 transform: translateY
(0);
5193 .TimelineMenu .timeline-menu-title {
5196 -webkit-user-select: none
;
5197 -moz-user-select: none
;
5198 -ms-user-select: none
;
5201 display: -ms-flexbox
;
5204 .TimelineMenu .timeline-menu-title .timeline-menu-name {
5206 text-overflow: ellipsis
;
5207 white-space: nowrap
;
5209 .TimelineMenu .timeline-menu-title svg {
5211 transition: transform
100ms;
5213 .TimelineMenu .timeline-menu-title .click-blocker {
5215 -ms-flex-positive: 1;
5218 .TimelineMenu.open .timeline-menu-title svg {
5220 color: var
(--panelText
, #b9b9ba);
5221 transform: rotate
(180deg);
5223 .TimelineMenu .panel {
5224 box-shadow: var
(--popoverShadow
);
5232 border-bottom: 1px solid
;
5234 border-color: var
(--border
, #222);
5237 .TimelineMenu li:last-child a {
5238 border-bottom-right-radius: 10px;
5239 border-bottom-right-radius: var
(--panelRadius
, 10px);
5240 border-bottom-left-radius: 10px;
5241 border-bottom-left-radius: var
(--panelRadius
, 10px);
5243 .TimelineMenu li:last-child {
5248 padding: 0.6em 0.65em;
5250 .TimelineMenu a:hover {
5251 background-color: #151e2a;
5252 background-color: var
(--selectedMenu
, #151e2a);
5254 color: var
(--selectedMenuText
, #d8a070);
5255 --faint: var
(--selectedMenuFaintText
, $fallback--faint
);
5256 --faintLink: var
(--selectedMenuFaintLink
, $fallback--faint
);
5257 --lightText: var
(--selectedMenuLightText
, $fallback--lightText
);
5258 --icon: var
(--selectedMenuIcon
, $fallback--icon
);
5260 .TimelineMenu a.router-link-active {
5261 font-weight: bolder
;
5262 background-color: #151e2a;
5263 background-color: var
(--selectedMenu
, #151e2a);
5265 color: var
(--selectedMenuText
, #b9b9ba);
5266 --faint: var
(--selectedMenuFaintText
, $fallback--faint
);
5267 --faintLink: var
(--selectedMenuFaintLink
, $fallback--faint
);
5268 --lightText: var
(--selectedMenuLightText
, $fallback--lightText
);
5269 --icon: var
(--selectedMenuIcon
, $fallback--icon
);
5271 .TimelineMenu a.router-link-active:hover {
5272 text-decoration: underline
;
5274 .TimelineMenu a svg {
5275 margin-right: 0.4em;
5276 margin-left: -0.2em;
5278 .TimelineQuickSettings > button {
5281 width: var
(--__panel-heading-height-inner
);
5284 .TimelineQuickSettings > button svg {
5287 .Timeline .loadmore-text {
5290 .Timeline.-blocked {
5293 .Timeline .conversation-heading {
5294 top: calc
(var
(--__panel-heading-height
) * var
(--currentPanelStack
, 2));
5297 .Timeline.-nonpanel .timeline-heading {
5299 line-height: 2.75em;
5302 .Timeline.-nonpanel .timeline-heading .button-default, .Timeline.-nonpanel .timeline-heading .alert {
5307 display: -ms-flexbox
;
5310 .tab-switcher .tab-icon {
5314 .tab-switcher.top-tabs {
5315 -ms-flex-direction: column
;
5316 flex-direction: column
;
5318 .tab-switcher.top-tabs > .tabs {
5323 -ms-flex-direction: row
;
5324 flex-direction: row
;
5326 .tab-switcher.top-tabs > .tabs::after, .tab-switcher.top-tabs > .tabs::before {
5330 border-bottom: 1px solid
;
5331 border-bottom-color: #222;
5332 border-bottom-color: var
(--border
, #222);
5334 .tab-switcher.top-tabs > .tabs .tab-wrapper {
5337 .tab-switcher.top-tabs > .tabs .tab-wrapper:not(.active)::after {
5341 border-bottom: 1px solid
;
5342 border-bottom-color: #222;
5343 border-bottom-color: var
(--border
, #222);
5345 .tab-switcher.top-tabs > .tabs .tab {
5348 border-bottom-left-radius: 0;
5349 border-bottom-right-radius: 0;
5350 padding-bottom: 99px;
5351 margin-bottom: -93px;
5353 .tab-switcher.top-tabs .contents.scrollable-tabs {
5354 -ms-flex-preferred-size: 0;
5357 .tab-switcher.side-tabs {
5358 -ms-flex-direction: row
;
5359 flex-direction: row
;
5361 @media all and
(max-width: 800px) {
5362 .tab-switcher.side-tabs {
5366 .tab-switcher.side-tabs > .contents {
5370 .tab-switcher.side-tabs > .tabs {
5375 -ms-flex-direction: column
;
5376 flex-direction: column
;
5378 .tab-switcher.side-tabs > .tabs::after, .tab-switcher.side-tabs > .tabs::before {
5379 -ms-flex-negative: 0;
5381 -ms-flex-preferred-size: 0.5em;
5384 border-right: 1px solid
;
5385 border-right-color: #222;
5386 border-right-color: var
(--border
, #222);
5388 .tab-switcher.side-tabs > .tabs::after {
5389 -ms-flex-positive: 1;
5392 .tab-switcher.side-tabs > .tabs::before {
5393 -ms-flex-positive: 0;
5396 .tab-switcher.side-tabs > .tabs .tab-wrapper {
5398 display: -ms-flexbox
;
5400 -ms-flex-direction: column
;
5401 flex-direction: column
;
5403 @media all and
(max-width: 800px) {
5404 .tab-switcher.side-tabs > .tabs .tab-wrapper {
5408 .tab-switcher.side-tabs > .tabs .tab-wrapper:not(.active)::after {
5412 border-right: 1px solid
;
5413 border-right-color: #222;
5414 border-right-color: var
(--border
, #222);
5416 .tab-switcher.side-tabs > .tabs .tab-wrapper::before {
5420 border-right: 1px solid
;
5421 border-right-color: #222;
5422 border-right-color: var
(--border
, #222);
5424 .tab-switcher.side-tabs > .tabs .tab-wrapper:last-child .tab {
5427 .tab-switcher.side-tabs > .tabs .tab {
5430 box-sizing: content-box
;
5433 border-top-right-radius: 0;
5434 border-bottom-right-radius: 0;
5436 padding-right: calc
(1em + 200px);
5437 margin-right: -200px;
5440 @media all and
(max-width: 800px) {
5441 .tab-switcher.side-tabs > .tabs .tab {
5442 padding-left: 0.25em;
5443 padding-right: calc
(.25em + 200px);
5444 margin-right: calc
(.25em - 200px);
5445 margin-left: 0.25em;
5447 .tab-switcher.side-tabs > .tabs .tab .text {
5451 .tab-switcher .contents {
5456 .tab-switcher .contents .hidden {
5459 .tab-switcher .contents .full-height:not(.hidden) {
5461 display: -ms-flexbox
;
5463 -ms-flex-direction: column
;
5464 flex-direction: column
;
5466 .tab-switcher .contents .full-height:not(.hidden) > *:not(.mobile-label) {
5470 .tab-switcher .contents.scrollable-tabs {
5473 .tab-switcher .tab {
5475 white-space: nowrap
;
5478 .tab-switcher .tab:not(.active) {
5481 .tab-switcher .tab:not(.active):hover {
5484 .tab-switcher .tab.active {
5485 background: transparent
;
5488 color: var
(--tabActiveText
, #b9b9ba);
5490 .tab-switcher .tab img {
5492 vertical-align: top
;
5495 .tab-switcher .tabs {
5496 display: -ms-flexbox
;
5499 box-sizing: border-box
;
5501 .tab-switcher .tabs::after, .tab-switcher .tabs::before {
5506 .tab-switcher .tab-wrapper {
5508 display: -ms-flexbox
;
5513 .tab-switcher .tab-wrapper:not(.active)::after {
5518 .tab-switcher .mobile-label {
5519 padding-left: 0.3em;
5520 padding-bottom: 0.25em;
5523 margin-bottom: 0.25em;
5524 border-bottom: 1px solid var
(--border
, #222);
5526 @media all and
(min-width: 800px) {
5527 .tab-switcher .mobile-label {
5532 display: -ms-flexbox
;
5535 text-overflow: ellipsis
;
5536 white-space: nowrap
;
5539 .chat-title .username {
5541 text-overflow: ellipsis
;
5542 white-space: nowrap
;
5544 word-wrap: break-word
;
5547 .chat-title .avatar-container {
5548 -ms-flex-item-align: center
;
5549 -ms-grid-row-align: center
;
5553 .chat-title .titlebar-avatar {
5554 margin-right: 0.5em;
5557 border-radius: 10px;
5558 border-radius: var
(--avatarAltRadius
, 10px);
5560 .chat-title .titlebar-avatar.animated::before {
5564 display: -ms-flexbox
;
5566 -ms-flex-direction: row
;
5567 flex-direction: row
;
5571 box-sizing: border-box
;
5574 .chat-list-item :focus {
5577 .chat-list-item:hover {
5578 background-color: var
(--selectedPost
, #151e2a);
5579 box-shadow: 0 0 3px 1px rgba
(0, 0, 0, 0.1);
5581 .chat-list-item .chat-list-item-left {
5584 .chat-list-item .chat-list-item-center {
5586 box-sizing: border-box
;
5588 word-wrap: break-word
;
5590 .chat-list-item .heading {
5592 display: -ms-inline-flexbox
;
5593 display: inline-flex
;
5594 -ms-flex-pack: justify
;
5595 justify-content: space-between
;
5598 .chat-list-item .heading-right {
5599 white-space: nowrap
;
5601 .chat-list-item .name-and-account-name {
5602 text-overflow: ellipsis
;
5603 white-space: nowrap
;
5605 -ms-flex-negative: 1;
5607 line-height: var
(--post-line-height
);
5609 .chat-list-item .chat-preview {
5610 display: -ms-inline-flexbox
;
5611 display: inline-flex
;
5613 white-space: nowrap
;
5614 text-overflow: ellipsis
;
5617 color: var
(--faint
, #b9b9ba);
5621 color: var
(--faintLink
, #d8a070);
5622 text-decoration: none
;
5623 pointer-events: none
;
5625 .chat-list-item:hover .animated.avatar canvas {
5628 .chat-list-item:hover .animated.avatar img {
5629 visibility: visible
;
5631 .chat-list-item .Avatar {
5632 border-radius: 10px;
5633 border-radius: var
(--avatarAltRadius
, 10px);
5635 .chat-list-item .chat-preview-body {
5636 --emoji-size: 1.4em;
5638 .chat-list-item .time-wrapper {
5639 line-height: var
(--post-line-height
);
5641 .chat-list-item .chat-preview-body {
5645 display: -ms-flexbox
;
5652 .basic-user-card-collapsed-content {
5659 .basic-user-card-user-name img {
5660 -o-object-fit: contain
;
5661 object-fit: contain
;
5664 vertical-align: middle
;
5666 .basic-user-card-user-name-value, .basic-user-card-screen-name {
5667 display: inline-block
;
5670 white-space: nowrap
;
5671 text-overflow: ellipsis
;
5673 .basic-user-card-expanded-content {
5679 .chat-new .input-wrap {
5680 display: -ms-flexbox
;
5682 margin: 0.7em 0.5em 0.7em 0.5em;
5684 .chat-new .input-wrap input {
5687 .chat-new .search-icon {
5688 margin-right: 0.3em;
5690 .chat-new .member-list {
5691 padding-bottom: 0.7rem;
5693 .chat-new .basic-user-card:hover {
5695 background-color: var
(--selectedPost
, #151e2a);
5697 .chat-new .go-back-button {
5701 -ms-flex-item-align: start
;
5702 -ms-grid-row-align: start
;
5704 width: var
(--__panel-heading-height-inner
);
5710 .emtpy-chat-list-alert {
5713 display: -ms-flexbox
;
5715 -ms-flex-pack: center
;
5716 justify-content: center
;
5718 color: var
(--faint
, #b9b9ba);
5720 .chat-message-wrapper.hovered-message-chain .animated.Avatar canvas {
5723 .chat-message-wrapper.hovered-message-chain .animated.Avatar img {
5724 visibility: visible
;
5726 .chat-message-wrapper .chat-message-menu {
5727 transition: opacity
0.1s;
5732 .chat-message-wrapper .chat-message-menu button {
5734 padding-bottom: 0.2em;
5736 .chat-message-wrapper .menu-icon {
5739 .chat-message-wrapper .menu-icon:hover, .extra-button-popover.open .chat-message-wrapper .menu-icon {
5741 color: var
(--text
, #b9b9ba);
5743 .chat-message-wrapper .popover {
5746 .chat-message-wrapper .chat-message {
5747 display: -ms-flexbox
;
5749 padding-bottom: 0.5em;
5751 .chat-message-wrapper .chat-message .status-body:hover {
5752 --_still-image-img-visibility: visible
;
5753 --_still-image-canvas-visibility: hidden
;
5754 --_still-image-label-visibility: hidden
;
5756 .chat-message-wrapper .avatar-wrapper {
5757 margin-right: 0.72em;
5760 .chat-message-wrapper .link-preview, .chat-message-wrapper .attachments {
5763 .chat-message-wrapper .chat-message-inner {
5764 display: -ms-flexbox
;
5766 -ms-flex-direction: column
;
5767 flex-direction: column
;
5768 -ms-flex-align: start
;
5769 align-items: flex-start
;
5774 .chat-message-wrapper .chat-message-inner.with-media {
5777 .chat-message-wrapper .chat-message-inner.with-media .status {
5780 .chat-message-wrapper .status {
5781 border-radius: 10px;
5782 border-radius: var
(--chatMessageRadius
, 10px);
5783 display: -ms-flexbox
;
5787 .chat-message-wrapper .created-at {
5791 margin: -1em 0 -0.5em 0;
5795 .chat-message-wrapper .without-attachment .message-content .RichContent::after {
5796 margin-right: 5.4em;
5798 display: inline-block
;
5800 .chat-message-wrapper .pending .status-content.media-body, .chat-message-wrapper .pending .created-at {
5801 color: var
(--faint
);
5803 .chat-message-wrapper .error .status-content.media-body, .chat-message-wrapper .error .created-at {
5805 color: var
(--badgeNotification
, #ff0000);
5807 .chat-message-wrapper .incoming a {
5808 color: var
(--chatMessageIncomingLink
, #d8a070);
5810 .chat-message-wrapper .incoming .status {
5811 color: var
(--chatMessageIncomingText
, #b9b9ba);
5812 background-color: var
(--chatMessageIncomingBg
, #121a24);
5813 border: 1px solid var
(--chatMessageIncomingBorder
, --border
);
5815 .chat-message-wrapper .incoming .created-at a {
5816 color: var
(--chatMessageIncomingText
, #b9b9ba);
5818 .chat-message-wrapper .incoming .chat-message-menu {
5821 .chat-message-wrapper .outgoing {
5822 display: -ms-flexbox
;
5824 -ms-flex-direction: row
;
5825 flex-direction: row
;
5826 -ms-flex-wrap: wrap
;
5828 -ms-flex-line-pack: end
;
5831 justify-content: flex-end
;
5833 .chat-message-wrapper .outgoing a {
5834 color: var
(--chatMessageOutgoingLink
, #d8a070);
5836 .chat-message-wrapper .outgoing .status {
5837 color: var
(--chatMessageOutgoingText
, #b9b9ba);
5838 background-color: var
(--chatMessageOutgoingBg
, #151e2a);
5839 border: 1px solid var
(--chatMessageOutgoingBorder
, --lightBg
);
5841 .chat-message-wrapper .outgoing .chat-message-inner {
5842 -ms-flex-align: end
;
5843 align-items: flex-end
;
5845 .chat-message-wrapper .outgoing .chat-message-menu {
5848 .chat-message-wrapper .visible {
5851 .chat-message-date-separator {
5855 -webkit-user-select: none
;
5856 -moz-user-select: none
;
5857 -ms-user-select: none
;
5860 color: var
(--faintedText
, #b9b9ba);
5863 display: -ms-flexbox
;
5867 .chat-view .chat-view-inner {
5871 display: -ms-flexbox
;
5874 .chat-view .chat-view-body {
5875 box-sizing: border-box
;
5876 background-color: var
(--chatBg
, #121a24);
5877 display: -ms-flexbox
;
5879 -ms-flex-direction: column
;
5880 flex-direction: column
;
5883 min-height: calc
(100vh - var
(--navbar-height
));
5885 border-radius: 10px 10px 0 0;
5886 border-radius: var
(--panelRadius
, 10px) var
(--panelRadius
, 10px) 0 0;
5888 .chat-view .chat-view-body::after {
5891 .chat-view .message-list {
5894 display: -ms-flexbox
;
5896 -ms-flex-direction: column
;
5897 flex-direction: column
;
5899 justify-content: end
;
5901 .chat-view .footer {
5902 position: -webkit-sticky
;
5905 background-color: #121a24;
5906 background-color: var
(--bg
, #121a24);
5909 .chat-view .chat-view-heading {
5910 -ms-grid-columns: auto minmax
(50%, 1fr);
5911 grid-template-columns: auto minmax
(50%, 1fr);
5913 .chat-view .go-back-button {
5917 -ms-flex-item-align: start
;
5918 -ms-grid-row-align: start
;
5920 width: var
(--__panel-heading-height-inner
);
5922 .chat-view .jump-to-bottom-button {
5925 border-radius: 100%;
5929 background-color: #182230;
5930 background-color: var
(--btn
, #182230);
5931 display: -ms-flexbox
;
5933 -ms-flex-pack: center
;
5934 justify-content: center
;
5935 -ms-flex-align: center
;
5936 align-items: center
;
5937 box-shadow: 0 1px 1px rgba
(0, 0, 0, 0.3), 0 2px 4px rgba
(0, 0, 0, 0.3);
5939 transition: 0.35s all
;
5940 transition-timing-function: cubic-bezier
(0, 1, 0.5, 1);
5945 .chat-view .jump-to-bottom-button.visible {
5947 visibility: visible
;
5949 .chat-view .jump-to-bottom-button i {
5952 color: var
(--text
, #b9b9ba);
5954 .chat-view .jump-to-bottom-button .unread-message-count {
5959 border-radius: 50px;
5962 .chat-view .jump-to-bottom-button .chat-loading-error {
5964 display: -ms-flexbox
;
5966 -ms-flex-align: end
;
5967 align-items: flex-end
;
5970 .chat-view .jump-to-bottom-button .chat-loading-error .error {
5973 .follow-card-content-container {
5974 -ms-flex-negative: 0;
5976 display: -ms-flexbox
;
5978 -ms-flex-direction: row
;
5979 flex-direction: row
;
5980 -ms-flex-pack: justify
;
5981 justify-content: space-between
;
5982 -ms-flex-wrap: wrap
;
5986 .follow-card-follow-button {
5991 .with-load-more-footer {
5994 border-top: 1px solid
;
5995 border-top-color: #222;
5996 border-top-color: var
(--border
, #222);
5998 .with-load-more-footer .error {
6001 .with-load-more-footer a {
6007 -ms-flex-preferred-size: 500px;
6009 --currentPanelStack: 1;
6011 .user-profile .user-profile-fields {
6014 .user-profile .user-profile-fields img {
6015 -o-object-fit: contain
;
6016 object-fit: contain
;
6017 vertical-align: middle
;
6021 .user-profile .user-profile-fields img.emoji {
6025 .user-profile .user-profile-fields .user-profile-field {
6026 display: -ms-flexbox
;
6029 border: 1px solid var
(--border
, #222);
6031 border-radius: var
(--inputRadius
, 4px);
6033 .user-profile .user-profile-fields .user-profile-field .user-profile-field-name {
6038 color: var
(--lightText
);
6040 border-right: 1px solid var
(--border
, #222);
6042 .user-profile .user-profile-fields .user-profile-field .user-profile-field-value {
6046 margin: 0 0 0 0.25em;
6048 .user-profile .user-profile-fields .user-profile-field .user-profile-field-name, .user-profile .user-profile-fields .user-profile-field .user-profile-field-value {
6050 text-overflow: ellipsis
;
6051 white-space: nowrap
;
6053 padding: 0.5em 1.5em;
6054 box-sizing: border-box
;
6056 .user-profile .userlist-placeholder {
6057 display: -ms-flexbox
;
6059 -ms-flex-pack: center
;
6060 justify-content: center
;
6061 -ms-flex-align: middle
;
6062 align-items: middle
;
6065 .user-profile-placeholder .panel-body {
6066 display: -ms-flexbox
;
6068 -ms-flex-pack: center
;
6069 justify-content: center
;
6070 -ms-flex-align: middle
;
6071 align-items: middle
;
6074 .search-result-heading {
6075 color: rgba
(185, 185, 186, 0.5);
6076 color: var
(--faint
, rgba
(185, 185, 186, 0.5));
6080 @media all and
(max-width: 800px) {
6081 .search-nav-heading .tab-switcher .tabs .tab-wrapper {
6083 -ms-flex-pack: center
;
6084 justify-content: center
;
6091 box-sizing: border-box
;
6092 border-bottom: 1px solid
;
6094 border-color: var
(--border
, #222);
6096 .search-result-footer {
6097 border-width: 1px 0 0 0;
6098 border-style: solid
;
6099 border-color: var
(--border
, #222);
6101 background-color: #182230;
6102 background-color: var
(--panel
, #182230);
6104 .search-input-container {
6106 display: -ms-flexbox
;
6108 -ms-flex-pack: center
;
6109 justify-content: center
;
6111 .search-input-container .search-input {
6113 line-height: 1.125rem;
6116 box-sizing: border-box
;
6118 .search-input-container .search-button {
6125 display: -ms-flexbox
;
6127 -ms-flex-align: center
;
6128 align-items: center
;
6134 color: var
(--text
, #b9b9ba);
6136 text-overflow: ellipsis
;
6137 white-space: nowrap
;
6144 line-height: 2.25rem;
6148 color: var
(--text
, #b9b9ba);
6151 .registration-form {
6152 display: -ms-flexbox
;
6154 -ms-flex-direction: column
;
6155 flex-direction: column
;
6158 .registration-form .container {
6159 display: -ms-flexbox
;
6161 -ms-flex-direction: row
;
6162 flex-direction: row
;
6164 .registration-form .container > * {
6167 .registration-form .terms-of-service {
6172 .registration-form .text-fields {
6176 display: -ms-flexbox
;
6178 -ms-flex-direction: column
;
6179 flex-direction: column
;
6181 .registration-form textarea {
6185 .registration-form .form-group {
6186 display: -ms-flexbox
;
6188 -ms-flex-direction: column
;
6189 flex-direction: column
;
6194 .registration-form .form-group--error {
6195 animation-name: shakeError
;
6196 animation-duration: 0.6s;
6197 animation-timing-function: ease-in-out
;
6199 .registration-form .form-group--error .form--label {
6201 color: var
(--cRed
, #f04124);
6203 .registration-form .form-error {
6207 .registration-form .form-error span {
6210 .registration-form .form-error ul {
6215 .registration-form .form-error ul li::before {
6218 .registration-form form textarea {
6222 .registration-form .captcha {
6224 margin-bottom: 0.4em;
6226 .registration-form .btn {
6230 .registration-form .error {
6233 @media all and
(max-width: 800px) {
6234 .registration-form .container {
6235 -ms-flex-direction: column-reverse
;
6236 flex-direction: column-reverse
;
6239 .password-reset-form {
6240 display: -ms-flexbox
;
6242 -ms-flex-direction: column
;
6243 flex-direction: column
;
6244 -ms-flex-align: center
;
6245 align-items: center
;
6248 .password-reset-form .container {
6249 display: -ms-flexbox
;
6253 -ms-flex-direction: column
;
6254 flex-direction: column
;
6258 .password-reset-form .container > * {
6261 .password-reset-form .form-group {
6262 display: -ms-flexbox
;
6264 -ms-flex-direction: column
;
6265 flex-direction: column
;
6268 line-height: 1.85em;
6270 .password-reset-form .error {
6272 animation-name: shakeError
;
6273 animation-duration: 0.4s;
6274 animation-timing-function: ease-in-out
;
6276 .password-reset-form .alert {
6278 margin: 0.3em 0 1em;
6280 .password-reset-form .password-reset-required {
6281 background-color: var
(--alertError
, rgba
(211, 16, 20, 0.5));
6284 .password-reset-form .notice-dismissible {
6285 padding-right: 2rem;
6287 .password-reset-form .dismiss {
6290 .follow-request-card-content-container {
6291 display: -ms-flexbox
;
6293 -ms-flex-direction: row
;
6294 flex-direction: row
;
6295 -ms-flex-wrap: wrap
;
6298 .follow-request-card-content-container button {
6300 margin-right: 0.5em;
6306 .follow-request-card-content-container button:last-child {
6316 .staff-group .basic-user-card {
6322 .mrf-section table {
6326 padding-bottom: 20px;
6328 .mrf-section table th, .mrf-section table td {
6332 vertical-align: text-top
;
6334 .mrf-section table th + th, .mrf-section table td + td {
6338 /*# sourceMappingURL=app.9065da1ae55149d987b6.css.map*/