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 {
3492 display: -ms-flexbox
;
3494 -ms-flex-direction: column
;
3495 flex-direction: column
;
3498 border-bottom: 1px solid
;
3500 border-color: var
(--border
, #222);
3501 word-wrap: break-word
;
3502 word-break: break-word
;
3505 .Notification:hover {
3506 --_still-image-img-visibility: visible
;
3507 --_still-image-canvas-visibility: hidden
;
3508 --_still-image-label-visibility: hidden
;
3510 .Notification.-muted {
3511 padding: 0.25em 0.6em;
3514 text-overflow: ellipsis
;
3516 display: -ms-flexbox
;
3518 -ms-flex-wrap: nowrap
;
3521 .Notification.-muted .status-username, .Notification.-muted .mute-thread, .Notification.-muted .mute-words {
3524 white-space: nowrap
;
3526 .Notification.-muted .status-username, .Notification.-muted .mute-words {
3527 text-overflow: ellipsis
;
3530 .Notification.-muted .status-username {
3531 font-weight: normal
;
3534 margin-right: 0.2em;
3537 .Notification.-muted .mute-thread {
3541 .Notification.-muted .mute-words {
3546 .Notification.-muted .mute-words::before {
3549 .Notification.-muted .unmute {
3555 .Notification .type-icon {
3558 .Notification.-type--repeat .type-icon {
3560 color: var
(--cGreen
, #0fa00f);
3562 .Notification.-type--follow .type-icon {
3564 color: var
(--cBlue
, #0095ff);
3566 .Notification.-type--follow-request .type-icon {
3568 color: var
(--cBlue
, #0095ff);
3570 .Notification.-type--like .type-icon {
3573 color: var
(--cOrange
, orange
);
3575 .Notification.-type--move .type-icon {
3577 color: var
(--cBlue
, #0095ff);
3579 .NotificationFilters {
3580 -ms-flex-item-align: stretch
;
3581 -ms-grid-row-align: stretch
;
3582 align-self: stretch
;
3584 .NotificationFilters > button {
3587 width: var
(--__panel-heading-height-inner
);
3590 .NotificationFilters > button svg {
3593 .Notifications:not(.minimal) {
3594 padding-bottom: 15em;
3596 .Notifications .loadmore-error {
3598 color: var
(--text
, #b9b9ba);
3600 .Notifications .notification {
3603 .Notifications .notification .notification-overlay {
3609 pointer-events: none
;
3611 .Notifications .notification.unseen .notification-overlay {
3612 background-image: linear-gradient
(135deg, var
(--badgeNotification
, #ff0000) 4px, transparent
10px);
3615 box-sizing: border-box
;
3616 /* TODO cleanup this */
3618 .notification:hover .animated.Avatar canvas {
3621 .notification:hover .animated.Avatar img {
3622 visibility: visible
;
3624 .notification:last-child .Notification {
3625 border-bottom: none
;
3627 .notification .non-mention {
3628 display: -ms-flexbox
;
3632 -ms-flex-wrap: nowrap
;
3636 --link: var
(--faintLink
);
3637 --text: var
(--faint
);
3639 .notification .non-mention .avatar-container {
3643 .notification .follow-request-accept:hover {
3645 color: var
(--text
, #b9b9ba);
3647 .notification .follow-request-reject:hover {
3649 color: var
(--cRed
, #ff0000);
3651 .notification .follow-text, .notification .move-text {
3653 overflow-wrap: break-word
;
3654 display: -ms-flexbox
;
3656 -ms-flex-pack: justify
;
3657 justify-content: space-between
;
3659 .notification .follow-text .follow-name, .notification .move-text .follow-name {
3663 text-overflow: ellipsis
;
3664 white-space: nowrap
;
3666 .notification .Status {
3670 .notification time {
3671 white-space: nowrap
;
3673 .notification .notification-right {
3676 padding-left: 0.8em;
3679 .notification .notification-right .timeago {
3683 .notification .emoji-reaction-emoji {
3686 .notification .notification-details {
3688 word-wrap: break-word
;
3689 line-height: var
(--post-line-height
);
3695 display: -ms-flexbox
;
3697 -ms-flex-wrap: nowrap
;
3699 -ms-flex-pack: justify
;
3700 justify-content: space-between
;
3702 .notification .notification-details .name-and-action {
3706 text-overflow: ellipsis
;
3708 .notification .notification-details .username {
3709 font-weight: bolder
;
3711 text-overflow: ellipsis
;
3712 white-space: nowrap
;
3714 .notification .notification-details .timeago {
3715 margin-right: 0.2em;
3717 .notification .notification-details .status-content {
3721 .notification .notification-details h1 {
3722 word-break: break-all
;
3728 .notification .notification-details h1 small {
3729 font-weight: lighter
;
3731 .notification .notification-details p {
3734 margin-bottom: 0.3em;
3736 .MobileNav .mobile-nav {
3739 line-height: var
(--navbar-height
);
3740 -ms-grid-rows: 50px;
3741 grid-template-rows: 50px;
3742 -ms-grid-columns: 2fr auto
;
3743 grid-template-columns: 2fr auto
;
3745 box-sizing: border-box
;
3747 .MobileNav .mobile-nav a {
3748 color: var
(--topBarLink
, #d8a070);
3750 .MobileNav .mobile-inner-nav {
3752 display: -ms-flexbox
;
3754 -ms-flex-align: center
;
3755 align-items: center
;
3757 .MobileNav .mobile-nav-button {
3758 display: inline-block
;
3764 .MobileNav .site-name {
3766 display: inline-block
;
3769 /* moslty just to get rid of extra whitespaces */
3770 display: -ms-flexbox
;
3773 .MobileNav .alert-dot {
3774 border-radius: 100%;
3778 left: calc
(50% - 4px);
3779 top: calc
(50% - 4px);
3782 background-color: #ff0000;
3783 background-color: var
(--badgeNotification
, #ff0000);
3785 .MobileNav .mobile-notifications-drawer {
3792 box-shadow: 1px 1px 4px rgba
(0, 0, 0, 0.6);
3793 box-shadow: var
(--panelShadow
);
3794 transition-property: transform
;
3795 transition-duration: 0.25s;
3796 transform: translateX
(0);
3798 -webkit-overflow-scrolling: touch
;
3800 .MobileNav .mobile-notifications-drawer.-closed {
3801 transform: translateX
(100%);
3804 .MobileNav .mobile-notifications-header {
3805 display: -ms-flexbox
;
3807 -ms-flex-align: center
;
3808 align-items: center
;
3809 -ms-flex-pack: justify
;
3810 justify-content: space-between
;
3816 color: var
(--topBarText
);
3817 background-color: #182230;
3818 background-color: var
(--topBar
, #182230);
3819 box-shadow: 0px 0px 4px rgba
(0, 0, 0, 0.6);
3820 box-shadow: var
(--topBarShadow
);
3822 .MobileNav .mobile-notifications-header .title {
3826 .MobileNav .mobile-notifications {
3829 height: calc
(100vh - var
(--navbar-height
));
3833 color: var
(--text
, #b9b9ba);
3834 background-color: #121a24;
3835 background-color: var
(--bg
, #121a24);
3837 .MobileNav .mobile-notifications .notifications {
3842 .MobileNav .mobile-notifications .notifications .panel {
3847 .MobileNav .mobile-notifications .notifications .panel:after {
3850 .MobileNav .mobile-notifications .notifications .panel .panel-heading {
3855 display: -ms-inline-flexbox
;
3856 display: inline-flex
;
3857 -ms-flex-align: baseline
;
3858 align-items: baseline
;
3859 vertical-align: baseline
;
3861 justify-content: flex-end
;
3863 .SearchBar.-expanded {
3866 .SearchBar
.search-bar-input
,
3867 .SearchBar .search-button {
3870 .SearchBar .search-bar-input {
3874 .SearchBar .cancel-search {
3877 .SearchBar .cancel-icon {
3879 color: var
(--btnTopBarText
, #b9b9ba);
3885 color: var
(--topBarLink
, #d8a070);
3887 .DesktopNav .inner-nav {
3890 -ms-grid-rows: var
(--navbar-height
);
3891 grid-template-rows: var
(--navbar-height
);
3892 -ms-grid-columns: 2fr auto
2fr;
3893 grid-template-columns: 2fr auto
2fr;
3894 grid-template-areas: "sitename logo actions";
3895 box-sizing: border-box
;
3900 .DesktopNav.-logoLeft .inner-nav {
3901 -ms-grid-columns: auto
2fr 2fr;
3902 grid-template-columns: auto
2fr 2fr;
3903 grid-template-areas: "logo sitename actions";
3905 .DesktopNav .button-default, .DesktopNav .button-default svg {
3907 color: var
(--btnTopBarText
, #b9b9ba);
3909 .DesktopNav .button-default:active {
3910 background-color: #182230;
3911 background-color: var
(--btnPressedTopBar
, #182230);
3913 color: var
(--btnPressedTopBarText
, #b9b9ba);
3915 .DesktopNav .button-default:disabled {
3917 color: var
(--btnDisabledTopBarText
, #b9b9ba);
3919 .DesktopNav .button-default.toggled {
3921 color: var
(--btnToggledTopBarText
, #b9b9ba);
3922 background-color: #182230;
3923 background-color: var
(--btnToggledTopBar
, #182230);
3928 transition: opacity
;
3929 transition-timing-function: ease-out
;
3930 transition-duration: 100ms;
3932 @media all and
(min-width: 800px) {
3934 opacity: 1 !important
;
3937 .DesktopNav .logo .mask {
3938 -webkit-mask-repeat: no-repeat
;
3939 mask-repeat: no-repeat
;
3940 -webkit-mask-position: center
;
3941 mask-position: center
;
3942 -webkit-mask-size: contain
;
3944 background-color: #182230;
3945 background-color: var
(--topBarText
, #182230);
3952 .DesktopNav .logo img {
3953 display: inline-block
;
3954 height: var
(--navbar-height
);
3956 .DesktopNav .nav-icon {
3962 .DesktopNav .nav-icon .svg-inline--fa {
3964 color: var
(--topBarLink
, #d8a070);
3966 .DesktopNav .sitename {
3967 grid-area: sitename
;
3969 .DesktopNav .actions {
3975 line-height: var
(--navbar-height
);
3976 height: var
(--navbar-height
);
3978 display: -ms-flexbox
;
3980 -ms-flex-wrap: wrap
;
3983 .DesktopNav .item.right {
3985 justify-content: flex-end
;
3988 .list-item:not(:last-child) {
3989 border-bottom: 1px solid
;
3990 border-bottom-color: #222;
3991 border-bottom-color: var
(--border
, #222);
3993 .list-empty-content {
3997 .user-reporting-panel {
4003 .user-reporting-panel .panel-body {
4004 display: -ms-flexbox
;
4006 -ms-flex-direction: column-reverse
;
4007 flex-direction: column-reverse
;
4008 border-top: 1px solid
;
4010 border-color: var
(--border
, #222);
4013 .user-reporting-panel-left {
4014 padding: 1.1em 0.7em 0.7em;
4015 line-height: var
(--post-line-height
);
4016 box-sizing: border-box
;
4018 .user-reporting-panel-left > div {
4021 .user-reporting-panel-left > div:last-child {
4024 .user-reporting-panel-left p {
4027 .user-reporting-panel-left textarea.form-control {
4031 transition: min-height
200ms 100ms;
4035 .user-reporting-panel-left .btn {
4039 .user-reporting-panel-left .alert {
4043 .user-reporting-panel-right {
4044 display: -ms-flexbox
;
4046 -ms-flex-direction: column
;
4047 flex-direction: column
;
4050 .user-reporting-panel-sitem {
4051 display: -ms-flexbox
;
4053 -ms-flex-pack: justify
;
4054 justify-content: space-between
;
4055 /* TODO cleanup this */
4057 .user-reporting-panel-sitem > .Status {
4061 .user-reporting-panel-sitem > .checkbox {
4064 @media all and
(min-width: 801px) {
4065 .user-reporting-panel .panel-body {
4066 -ms-flex-direction: row
;
4067 flex-direction: row
;
4069 .user-reporting-panel-left {
4072 border-right: 1px solid
;
4074 border-color: var
(--border
, #222);
4077 .user-reporting-panel-left > div {
4080 .user-reporting-panel-right {
4084 margin-bottom: 12px;
4087 .modal-view.post-form-modal-view {
4088 -ms-flex-align: start
;
4089 align-items: flex-start
;
4091 .post-form-modal-panel {
4092 -ms-flex-negative: 0;
4099 @media (orientation: landscape
) {
4100 .post-form-modal-panel {
4104 .global-notice-list {
4108 pointer-events: none
;
4110 display: -ms-flexbox
;
4112 -ms-flex-direction: column
;
4113 flex-direction: column
;
4114 -ms-flex-align: center
;
4115 align-items: center
;
4117 .global-notice-list .global-notice {
4118 pointer-events: auto
;
4121 max-width: calc
(100% - 3em);
4122 display: -ms-flexbox
;
4124 padding-left: 1.5em;
4126 margin-bottom: 0.5em;
4128 .global-notice-list .global-notice .notice-message {
4132 .global-notice-list .global-error {
4133 background-color: var
(--alertPopupError
, #ff0000);
4134 color: var
(--alertPopupErrorText
, #b9b9ba);
4136 .global-notice-list .global-error .svg-inline--fa {
4137 color: var
(--alertPopupErrorText
, #b9b9ba);
4139 .global-notice-list .global-warning {
4140 background-color: var
(--alertPopupWarning
, orange
);
4141 color: var
(--alertPopupWarningText
, #b9b9ba);
4143 .global-notice-list .global-warning .svg-inline--fa {
4144 color: var
(--alertPopupWarningText
, #b9b9ba);
4146 .global-notice-list .global-success {
4147 background-color: var
(--alertPopupSuccess
, #0fa00f);
4148 color: var
(--alertPopupSuccessText
, #b9b9ba);
4150 .global-notice-list .global-success .svg-inline--fa {
4151 color: var
(--alertPopupSuccessText
, #b9b9ba);
4153 .global-notice-list .global-info {
4154 background-color: var
(--alertPopupNeutral
, #182230);
4155 color: var
(--alertPopupNeutralText
, #b9b9ba);
4157 .global-notice-list .global-info .svg-inline--fa {
4158 color: var
(--alertPopupNeutralText
, #b9b9ba);
4160 .global-notice-list .close-notice {
4161 padding-right: 0.2em;
4163 .global-notice-list .close-notice .svg-inline--fa:hover {
4168 --navbar-height: 3.5rem;
4169 --post-line-height: 1.4;
4175 font-family: sans-serif
;
4176 font-family: var
(--interfaceFont
, sans-serif
);
4179 color: var
(--text
, #b9b9ba);
4180 -webkit-font-smoothing: antialiased
;
4181 -moz-osx-font-smoothing: grayscale
;
4182 overscroll-behavior-y: none
;
4189 @media (any-pointer: fine
) {
4191 scrollbar-color: var
(--btn
) transparent
;
4193 *::-webkit-scrollbar
{
4194 background: transparent
;
4196 *::-webkit-scrollbar-button
, *::-webkit-scrollbar-thumb
{
4197 background-color: var
(--btn
);
4198 box-shadow: var
(--buttonShadow
);
4199 border-radius: var
(--btnRadius
);
4201 *::-webkit-scrollbar-button
{
4202 --___bgPadding: 2px;
4203 color: var
(--btnText
);
4204 background-repeat: no-repeat
, no-repeat
;
4206 *::-webkit-scrollbar-button:horizontal
{
4207 background-size: 50% calc
(50% - var
(--___bgPadding
)), 50% calc
(50% - var
(--___bgPadding
));
4209 *::-webkit-scrollbar-button:horizontal:increment
{
4210 background-image: linear-gradient
(45deg, var
(--btnText
) 50%, transparent
51%), linear-gradient
(-45deg, transparent
50%, var
(--btnText
) 51%);
4211 background-position: top var
(--___bgPadding
) left
50%, right
50% bottom var
(--___bgPadding
);
4213 *::-webkit-scrollbar-button:horizontal:decrement
{
4214 background-image: linear-gradient
(45deg, transparent
50%, var
(--btnText
) 51%), linear-gradient
(-45deg, var
(--btnText
) 50%, transparent
51%);
4215 background-position: bottom var
(--___bgPadding
) right
50%, left
50% top var
(--___bgPadding
);
4217 *::-webkit-scrollbar-button:vertical
{
4218 background-size: calc
(50% - var
(--___bgPadding
)) 50%, calc
(50% - var
(--___bgPadding
)) 50%;
4220 *::-webkit-scrollbar-button:vertical:increment
{
4221 background-image: linear-gradient
(-45deg, transparent
50%, var
(--btnText
) 51%), linear-gradient
(45deg, transparent
50%, var
(--btnText
) 51%);
4222 background-position: right var
(--___bgPadding
) top
50%, left var
(--___bgPadding
) top
50%;
4224 *::-webkit-scrollbar-button:vertical:decrement
{
4225 background-image: linear-gradient
(-45deg, var
(--btnText
) 50%, transparent
51%), linear-gradient
(45deg, var
(--btnText
) 50%, transparent
51%);
4226 background-position: left var
(--___bgPadding
) top
50%, right var
(--___bgPadding
) top
50%;
4229 scrollbar-color: var
(--selectedMenu
) var
(--wallpaper
);
4230 background: var
(--wallpaper
);
4234 text-decoration: none
;
4236 color: var
(--link
, #d8a070);
4244 color: var
(--icon
, #666);
4248 color: var
(--topBarText
);
4249 background-color: #182230;
4250 background-color: var
(--topBar
, #182230);
4251 color: rgba
(185, 185, 186, 0.5);
4252 color: var
(--faint
, rgba
(185, 185, 186, 0.5));
4253 box-shadow: 0 0 4px rgba
(0, 0, 0, 0.6);
4254 box-shadow: var
(--topBarShadow
);
4255 box-sizing: border-box
;
4256 height: var
(--navbar-height
);
4262 .column.-scrollable {
4263 top: var
(--navbar-height
);
4264 position: -webkit-sticky
;
4277 top: var
(--navbar-height
);
4281 background-size: cover
;
4282 background-repeat: no-repeat
;
4283 background-color: var
(--wallpaper
);
4284 background-image: var
(--body-background-image
);
4285 background-position: 50%;
4289 grid-column-start: 1;
4290 -ms-grid-column-span: 3;
4291 grid-column-end: span
3;
4295 pointer-events: none
;
4296 background-color: rgba
(0, 0, 0, 0.15);
4297 background-color: var
(--underlay
, rgba
(0, 0, 0, 0.15));
4301 --miniColumn: 25rem;
4302 --maxiColumn: minmax
(var
(--miniColumn
), 45rem);
4304 --status-margin: 0.75em;
4308 -ms-grid-columns: var
(--miniColumn
) var
(--maxiColumn
);
4309 grid-template-columns: var
(--miniColumn
) var
(--maxiColumn
);
4310 grid-template-areas: "sidebar content";
4312 grid-template-rows: 1fr;
4313 box-sizing: border-box
;
4315 -ms-flex-line-pack: start
;
4316 align-content: flex-start
;
4317 -ms-flex-wrap: wrap
;
4319 -ms-flex-pack: center
;
4320 justify-content: center
;
4324 .app-layout .column {
4325 --___columnMargin: var
(--columnGap
);
4328 -ms-grid-columns: 100%;
4329 grid-template-columns: 100%;
4330 box-sizing: border-box
;
4334 margin: 0 calc
(var
(--___columnMargin
) / 2);
4335 padding: calc
(var
(--___columnMargin
)) 0;
4336 row-gap: var
(--___columnMargin
);
4337 -ms-flex-line-pack: start
;
4338 align-content: start
;
4340 .app-layout .column:not(.-scrollable) {
4341 margin-top: var
(--navbar-height
);
4343 .app-layout .column:hover {
4346 .app-layout .column.-full-height {
4351 .app-layout .column.-scrollable {
4352 --___paddingIncrease: calc
(var
(--columnGap
) / 2);
4353 position: -webkit-sticky
;
4355 top: var
(--navbar-height
);
4356 max-height: calc
(100vh - var
(--navbar-height
));
4359 margin-left: calc
(var
(--___paddingIncrease
) * -1);
4360 padding-left: calc
(var
(--___paddingIncrease
) + var
(--___columnMargin
) / 2);
4362 @supports (scrollbar-width: none
) or
(-webkit-text-fill-color: initial
) {
4363 .app-layout .column.-scrollable:not(.-show-scrollbar) {
4364 scrollbar-width: none
;
4365 margin-right: calc
(var
(--___paddingIncrease
) * -1);
4366 padding-right: calc
(var
(--___paddingIncrease
) + var
(--___columnMargin
) / 2);
4368 .app-layout .column.-scrollable:not(.-show-scrollbar)::-webkit-scrollbar {
4373 .app-layout .column.-scrollable .panel-heading.-sticky {
4374 top: calc
(var
(--columnGap
) / -1);
4376 .app-layout.-has-new-post-button .column {
4377 padding-bottom: 10rem;
4379 .app-layout.-no-sticky-headers .column .panel-heading.-sticky {
4383 .app-layout .column-inner {
4386 -ms-grid-columns: 100%;
4387 grid-template-columns: 100%;
4388 box-sizing: border-box
;
4390 -ms-flex-line-pack: start
;
4391 align-content: start
;
4393 .app-layout.-reverse:not(.-wide):not(.-mobile) {
4394 -ms-grid-columns: var
(--maxiColumn
) var
(--miniColumn
);
4395 grid-template-columns: var
(--maxiColumn
) var
(--miniColumn
);
4396 grid-template-areas: "content sidebar";
4399 -ms-grid-columns: var
(--miniColumn
) var
(--maxiColumn
) var
(--miniColumn
);
4400 grid-template-columns: var
(--miniColumn
) var
(--maxiColumn
) var
(--miniColumn
);
4401 grid-template-areas: "sidebar content notifs";
4403 .app-layout.-wide.-reverse {
4404 grid-template-areas: "notifs content sidebar";
4406 .app-layout.-mobile {
4407 -ms-grid-columns: 100vw;
4408 grid-template-columns: 100vw;
4409 grid-template-areas: "content";
4412 .app-layout.-mobile .column {
4416 margin-top: var
(--navbar-height
);
4419 .app-layout
.-mobile
.panel-heading
,
4420 .app-layout
.-mobile
.panel-heading::after
,
4421 .app-layout
.-mobile
.panel-heading::before
,
4422 .app-layout
.-mobile
.panel
,
4423 .app-layout.-mobile .panel::after {
4424 border-top-left-radius: 0;
4425 border-top-right-radius: 0;
4427 .app-layout
.-mobile
.underlay
,
4428 .app-layout
.-mobile #sidebar
,
4429 .app-layout.-mobile #notifs-column {
4432 .app-layout.-normal #notifs-column {
4439 -webkit-user-select: none
;
4440 -moz-user-select: none
;
4441 -ms-user-select: none
;
4444 color: var
(--btnText
, #b9b9ba);
4445 background-color: #182230;
4446 background-color: var
(--btn
, #182230);
4449 border-radius: var
(--btnRadius
, 4px);
4451 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
;
4452 box-shadow: var
(--buttonShadow
);
4454 font-family: sans-serif
;
4455 font-family: var
(--interfaceFont
, sans-serif
);
4457 .button-default.-sublime {
4458 background: transparent
;
4460 .button-default i
[class
*=icon-
],
4461 .button-default .svg-inline--fa {
4463 color: var
(--btnText
, #b9b9ba);
4465 .button-default::-moz-focus-inner {
4468 .button-default:hover {
4469 box-shadow: 0 0 4px rgba
(255, 255, 255, 0.3);
4470 box-shadow: var
(--buttonHoverShadow
);
4472 .button-default:active {
4473 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
;
4474 box-shadow: var
(--buttonPressedShadow
);
4476 color: var
(--btnPressedText
, #b9b9ba);
4477 background-color: #182230;
4478 background-color: var
(--btnPressed
, #182230);
4480 .button-default:active svg
,
4481 .button-default:active i {
4483 color: var
(--btnPressedText
, #b9b9ba);
4485 .button-default:disabled {
4486 cursor: not-allowed
;
4488 color: var
(--btnDisabledText
, #b9b9ba);
4489 background-color: #182230;
4490 background-color: var
(--btnDisabled
, #182230);
4492 .button-default:disabled svg
,
4493 .button-default:disabled i {
4495 color: var
(--btnDisabledText
, #b9b9ba);
4497 .button-default.toggled {
4499 color: var
(--btnToggledText
, #b9b9ba);
4500 background-color: #182230;
4501 background-color: var
(--btnToggled
, #182230);
4502 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
;
4503 box-shadow: var
(--buttonPressedShadow
);
4505 .button-default
.toggled svg
,
4506 .button-default.toggled i {
4508 color: var
(--btnToggledText
, #b9b9ba);
4510 .button-default.danger {
4512 color: var
(--alertErrorPanelText
, #b9b9ba);
4513 background-color: rgba
(211, 16, 20, 0.5);
4514 background-color: var
(--alertError
, rgba
(211, 16, 20, 0.5));
4521 text-align: initial
;
4523 font-family: inherit
;
4527 box-sizing: content-box
;
4530 .button-unstyled.-link {
4532 color: var
(--link
, #d8a070);
4534 .button-unstyled.-fullwidth {
4537 .button-unstyled.-hover-highlight:hover svg {
4539 color: var
(--lightText
, #b9b9ba);
4547 border-radius: var
(--inputRadius
, 4px);
4548 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
;
4549 box-shadow: var
(--inputShadow
);
4550 background-color: #182230;
4551 background-color: var
(--input
, #182230);
4553 color: var
(--inputText
, #b9b9ba);
4554 font-family: sans-serif
;
4555 font-family: var
(--inputFont
, sans-serif
);
4558 box-sizing: border-box
;
4559 display: inline-block
;
4562 -webkit-hyphens: none
;
4565 padding: 0 var
(--_padding
);
4575 input:disabled
, input
[disabled
=disabled
], input
.disabled
,
4577 textarea
[disabled
=disabled
],
4580 .input
[disabled
=disabled
],
4582 cursor: not-allowed
;
4586 textarea
[type
=range
],
4587 .input[type=range] {
4596 textarea
[type
=radio
],
4597 .input[type=radio] {
4600 input
[type
=radio
]:checked
+ label::before
,
4601 textarea
[type
=radio
]:checked
+ label::before
,
4602 .input[type=radio]:checked + label::before {
4603 box-shadow: 0 0 2px black inset
, 0 0 0 4px #182230 inset
;
4604 box-shadow: var
(--inputShadow
), 0 0 0 4px var
(--fg
, #182230) inset
;
4605 background-color: var
(--accent
, #d8a070);
4607 input
[type
=radio
]:disabled
, input
[type
=radio
]:disabled
+ label
, input
[type
=radio
]:disabled
+ label::before
,
4608 textarea
[type
=radio
]:disabled
,
4609 textarea
[type
=radio
]:disabled
+ label
,
4610 textarea
[type
=radio
]:disabled
+ label::before
,
4611 .input
[type
=radio
]:disabled
,
4612 .input
[type
=radio
]:disabled
+ label
,
4613 .input[type=radio]:disabled + label::before {
4616 input
[type
=radio
] + label::before
,
4617 textarea
[type
=radio
] + label::before
,
4618 .input[type=radio] + label::before {
4619 -ms-flex-negative: 0;
4621 display: inline-block
;
4623 transition: box-shadow
200ms;
4626 border-radius: 100%;
4627 box-shadow: 0 0 2px black inset
;
4628 box-shadow: var
(--inputShadow
);
4629 margin-right: 0.5em;
4630 background-color: #182230;
4631 background-color: var
(--input
, #182230);
4632 vertical-align: top
;
4636 box-sizing: border-box
;
4640 input
[type
=checkbox
],
4641 textarea
[type
=checkbox
],
4642 .input[type=checkbox] {
4645 input
[type
=checkbox
]:checked
+ label::before
,
4646 textarea
[type
=checkbox
]:checked
+ label::before
,
4647 .input[type=checkbox]:checked + label::before {
4649 color: var
(--inputText
, #b9b9ba);
4651 input
[type
=checkbox
]:disabled
, input
[type
=checkbox
]:disabled
+ label
, input
[type
=checkbox
]:disabled
+ label::before
,
4652 textarea
[type
=checkbox
]:disabled
,
4653 textarea
[type
=checkbox
]:disabled
+ label
,
4654 textarea
[type
=checkbox
]:disabled
+ label::before
,
4655 .input
[type
=checkbox
]:disabled
,
4656 .input
[type
=checkbox
]:disabled
+ label
,
4657 .input[type=checkbox]:disabled + label::before {
4660 input
[type
=checkbox
] + label::before
,
4661 textarea
[type
=checkbox
] + label::before
,
4662 .input[type=checkbox] + label::before {
4663 -ms-flex-negative: 0;
4665 display: inline-block
;
4667 transition: color
200ms;
4671 border-radius: var
(--checkboxRadius
, 2px);
4672 box-shadow: 0 0 2px black inset
;
4673 box-shadow: var
(--inputShadow
);
4674 margin-right: 0.5em;
4675 background-color: #182230;
4676 background-color: var
(--input
, #182230);
4677 vertical-align: top
;
4681 box-sizing: border-box
;
4685 input
.resize-height
,
4686 textarea
.resize-height
,
4687 .input.resize-height {
4691 padding: var
(--_padding
);
4692 line-height: var
(--post-line-height
);
4696 color: var
(--text
, #b9b9ba);
4697 background-color: #121a24;
4698 background-color: var
(--bg
, #121a24);
4700 .hide-number-spinner {
4701 -moz-appearance: textfield
;
4703 .hide-number-spinner[type=number]::-webkit-inner-spin-button, .hide-number-spinner[type=number]::-webkit-outer-spin-button {
4713 display: -ms-inline-flexbox
;
4714 display: inline-flex
;
4715 vertical-align: middle
;
4722 .btn-group button:not(:last-child) {
4723 border-top-right-radius: 0;
4724 border-bottom-right-radius: 0;
4726 .btn-group button:not(:first-child) {
4727 border-top-left-radius: 0;
4728 border-bottom-left-radius: 0;
4732 display: -ms-flexbox
;
4734 -ms-flex-direction: column
;
4735 flex-direction: column
;
4736 background-color: #121a24;
4737 background-color: var
(--bg
, #121a24);
4739 .panel::after, .panel {
4740 border-radius: 10px;
4741 border-radius: var
(--panelRadius
, 10px);
4751 box-shadow: 1px 1px 4px rgba
(0, 0, 0, 0.6);
4752 box-shadow: var
(--panelShadow
);
4753 pointer-events: none
;
4756 padding: var
(--panel-body-padding
, 0);
4758 .panel-body:empty::before {
4759 content: "\AF\\_(\30C4)_/\AF";
4771 --panel-heading-height-padding: 0.6em;
4772 --__panel-heading-height: 3.2em;
4773 --__panel-heading-height-inner: calc
(var
(--__panel-heading-height
) - 2 * var
(--panel-heading-height-padding
));
4775 box-sizing: border-box
;
4778 grid-auto-flow: column
;
4779 -ms-grid-columns: minmax
(50%, 1fr);
4780 grid-template-columns: minmax
(50%, 1fr);
4781 grid-auto-columns: auto
;
4782 grid-column-gap: 0.5em;
4785 background-size: cover
;
4787 height: var
(--__panel-heading-height
);
4788 line-height: var
(--__panel-heading-height-inner
);
4791 .panel-heading
.-flexible-height
,
4792 .panel-footer.-flexible-height {
4793 --__panel-heading-height: auto
;
4795 .panel-heading
.-flexible-height::after
, .panel-heading
.-flexible-height::before
,
4796 .panel-footer
.-flexible-height::after
,
4797 .panel-footer.-flexible-height::before {
4800 .panel-heading
.-stub
, .panel-heading
.-stub::after
,
4801 .panel-footer
.-stub
,
4802 .panel-footer.-stub::after {
4803 border-radius: 10px;
4804 border-radius: var
(--panelRadius
, 10px);
4806 .panel-heading
.-sticky
,
4807 .panel-footer.-sticky {
4808 position: -webkit-sticky
;
4810 top: var
(--navbar-height
);
4812 .panel-heading::after
, .panel-heading::before
,
4813 .panel-footer::after
,
4814 .panel-footer::before {
4821 pointer-events: none
;
4823 .panel-heading
.title
,
4824 .panel-footer .title {
4827 .panel-heading
.alert
,
4828 .panel-footer .alert {
4829 white-space: nowrap
;
4830 text-overflow: ellipsis
;
4833 .panel-heading:not
(.-flexible-height
) > .button-default
,
4834 .panel-heading:not
(.-flexible-height
) > .alert
,
4835 .panel-footer:not
(.-flexible-height
) > .button-default
,
4836 .panel-footer:not(.-flexible-height) > .alert {
4837 height: var
(--__panel-heading-height-inner
);
4839 box-sizing: border-box
;
4844 -ms-flex-item-align: stretch
;
4845 -ms-grid-row-align: stretch
;
4846 align-self: stretch
;
4849 border-radius: 10px 10px 0 0;
4850 border-radius: var
(--panelRadius
, 10px) var
(--panelRadius
, 10px) 0 0;
4851 border-width: 0 0 1px 0;
4852 -ms-flex-align: start
;
4854 color: var
(--panelText
);
4855 background-color: #121a24;
4856 background-color: var
(--bg
, #121a24);
4858 .panel-heading::after {
4859 background-color: #182230;
4860 background-color: var
(--panel
, #182230);
4862 border-radius: 10px 10px 0 0;
4863 border-radius: var
(--panelRadius
, 10px) var
(--panelRadius
, 10px) 0 0;
4864 box-shadow: var
(--panelHeaderShadow
);
4867 .panel-heading .-link {
4869 color: var
(--panelLink
, #d8a070);
4871 .panel-heading .faint {
4872 background-color: transparent
;
4873 color: rgba
(185, 185, 186, 0.5);
4874 color: var
(--panelFaint
, rgba
(185, 185, 186, 0.5));
4876 .panel-heading .faint-link {
4877 color: rgba
(185, 185, 186, 0.5);
4878 color: var
(--faintLink
, rgba
(185, 185, 186, 0.5));
4880 .panel-heading:not(.-flexible-height) > .button-default {
4881 -ms-flex-negative: 0;
4884 .panel-heading:not
(.-flexible-height
) > .button-default
,
4885 .panel-heading:not(.-flexible-height) > .button-default i[class*=icon-] {
4887 color: var
(--btnPanelText
, #b9b9ba);
4889 .panel-heading:not(.-flexible-height) > .button-default:active {
4890 background-color: #182230;
4891 background-color: var
(--btnPressedPanel
, #182230);
4893 color: var
(--btnPressedPanelText
, #b9b9ba);
4895 .panel-heading:not(.-flexible-height) > .button-default:disabled {
4897 color: var
(--btnDisabledPanelText
, #b9b9ba);
4899 .panel-heading:not(.-flexible-height) > .button-default.toggled {
4901 color: var
(--btnToggledPanelText
, #b9b9ba);
4904 border-radius: 0 0 10px 10px;
4905 border-radius: 0 0 var
(--panelRadius
, 10px) var
(--panelRadius
, 10px);
4906 -ms-flex-align: center
;
4907 align-items: center
;
4908 border-width: 1px 0 0 0;
4909 border-style: solid
;
4910 border-color: var
(--border
, #222);
4919 box-sizing: border-box
;
4920 display: inline-block
;
4921 border-radius: 99px;
4925 padding: 0.15em 0.15em;
4926 vertical-align: middle
;
4927 font-weight: normal
;
4932 white-space: nowrap
;
4934 text-overflow: ellipsis
;
4936 .badge.badge-notification {
4937 background-color: #ff0000;
4938 background-color: var
(--badgeNotification
, #ff0000);
4940 color: var
(--badgeNotificationText
, white
);
4946 border-radius: var
(--tooltipRadius
, 5px);
4949 background-color: rgba
(211, 16, 20, 0.5);
4950 background-color: var
(--alertError
, rgba
(211, 16, 20, 0.5));
4952 color: var
(--alertErrorText
, #b9b9ba);
4954 .panel-heading .alert.error {
4956 color: var
(--alertErrorPanelText
, #b9b9ba);
4959 background-color: rgba
(111, 111, 20, 0.5);
4960 background-color: var
(--alertWarning
, rgba
(111, 111, 20, 0.5));
4962 color: var
(--alertWarningText
, #b9b9ba);
4964 .panel-heading .alert.warning {
4966 color: var
(--alertWarningPanelText
, #b9b9ba);
4969 background-color: var
(--alertSuccess
, rgba
(111, 111, 20, 0.5));
4970 color: var
(--alertSuccessText
, #b9b9ba);
4972 .panel-heading .alert.success {
4973 color: var
(--alertSuccessPanelText
, #b9b9ba);
4976 color: rgba
(185, 185, 186, 0.5);
4977 color: var
(--faint
, rgba
(185, 185, 186, 0.5));
4980 color: rgba
(185, 185, 186, 0.5);
4981 color: var
(--faint
, rgba
(185, 185, 186, 0.5));
4984 text-decoration: underline
;
4986 .visibility-notice {
4988 border: 1px solid rgba
(185, 185, 186, 0.5);
4989 border: 1px solid var
(--faint
, rgba
(185, 185, 186, 0.5));
4991 border-radius: var
(--inputRadius
, 4px);
4993 .notice-dismissible {
4994 padding-right: 4rem;
4997 .notice-dismissible .dismiss {
5004 .fa-scale-110.svg-inline--fa {
5007 .fa-old-padding.svg-inline--fa {
5013 @media all and
(min-width: 801px) {
5019 display: inline-block
;
5023 .btn.button-default {
5026 .new-status-notification {
5033 @media all and
(max-width: 800px) {
5040 transform: rotate
(0deg);
5043 transform: rotate
(359deg);
5046 @keyframes shakeError
{
5048 transform: translateX
(0);
5051 transform: translateX
(0.375rem);
5054 transform: translateX
(-0.375rem);
5057 transform: translateX
(0.375rem);
5060 transform: translateX
(-0.375rem);
5063 transform: translateX
(0.375rem);
5066 transform: translateX
(-0.375rem);
5069 transform: translateX
(0);
5073 .fade-leave-active {
5074 transition: opacity
0.2s;
5077 .fade-leave-active {
5080 .thread-tree-replies {
5081 margin-left: var
(--status-margin
, 0.75em);
5082 border-left: 2px solid var
(--border
, #222);
5084 .thread-tree-replies-hidden {
5085 padding: var
(--status-margin
, 0.75em);
5086 /* Make the button stretch along the whole row */
5087 display: -ms-flexbox
;
5089 -ms-flex-align: stretch
;
5090 align-items: stretch
;
5091 -ms-flex-direction: column
;
5092 flex-direction: column
;
5096 /* expanded conversation in timeline */
5098 .Conversation .conversation-dive-to-top-level-box {
5099 padding: var
(--status-margin
, 0.75em);
5100 border-bottom-width: 1px;
5101 border-bottom-style: solid
;
5102 border-bottom-color: var
(--border
, #222);
5104 /* Make the button stretch along the whole row */
5105 display: -ms-flexbox
;
5107 -ms-flex-align: stretch
;
5108 align-items: stretch
;
5109 -ms-flex-direction: column
;
5110 flex-direction: column
;
5112 .Conversation .thread-ancestors {
5113 margin-left: var
(--status-margin
, 0.75em);
5114 border-left: 2px solid var
(--border
, #222);
5116 .Conversation .thread-ancestor.-faded .StatusContent {
5117 --link: var
(--faintLink
);
5118 --text: var
(--faint
);
5121 .Conversation .thread-ancestor-dive-box {
5122 padding-left: var
(--status-margin
, 0.75em);
5123 border-bottom-width: 1px;
5124 border-bottom-style: solid
;
5125 border-bottom-color: var
(--border
, #222);
5127 /* Make the button stretch along the whole row */
5129 .Conversation .thread-ancestor-dive-box, .Conversation .thread-ancestor-dive-box-inner {
5130 display: -ms-flexbox
;
5132 -ms-flex-align: stretch
;
5133 align-items: stretch
;
5134 -ms-flex-direction: column
;
5135 flex-direction: column
;
5137 .Conversation .thread-ancestor-dive-box-inner {
5138 padding: var
(--status-margin
, 0.75em);
5140 .Conversation .conversation-status {
5141 border-bottom-width: 1px;
5142 border-bottom-style: solid
;
5143 border-bottom-color: var
(--border
, #222);
5146 .Conversation
.thread-ancestor-has-other-replies
.conversation-status
,
5147 .Conversation
.thread-ancestor:last-child
.conversation-status
,
5148 .Conversation .thread-ancestor:last-child .thread-ancestor-dive-box, .Conversation:last-child .conversation-status, .Conversation.-expanded .thread-tree .conversation-status {
5149 border-bottom: none
;
5151 .Conversation .thread-ancestors + .thread-tree > .conversation-status {
5152 border-top-width: 1px;
5153 border-top-style: solid
;
5154 border-top-color: var
(--border
, #222);
5156 .Conversation.status-fadein.-expanded .thread-body {
5157 border-left-width: 4px;
5158 border-left-style: solid
;
5159 border-left-color: #ff0000;
5160 border-left-color: var
(--cRed
, #ff0000);
5161 border-radius: 0 0 10px 10px;
5162 border-radius: 0 0 var
(--panelRadius
, 10px) var
(--panelRadius
, 10px);
5163 border-bottom: 1px solid var
(--border
, #222);
5165 .Conversation.-expanded.status-fadein {
5166 margin: calc
(var
(--status-margin
, $status-margin
) / 2);
5169 -ms-flex-negative: 1;
5175 .TimelineMenu .popover-trigger-button {
5176 vertical-align: bottom
;
5178 .TimelineMenu .timeline-menu-popover-wrap {
5181 padding: 0 15px 15px 15px;
5183 .TimelineMenu .timeline-menu-popover {
5188 border-top-right-radius: 0;
5189 border-top-left-radius: 0;
5190 transform: translateY
(-100%);
5191 transition: transform
100ms;
5193 .TimelineMenu .panel::after {
5194 border-top-right-radius: 0;
5195 border-top-left-radius: 0;
5197 .TimelineMenu.open .timeline-menu-popover {
5198 transform: translateY
(0);
5200 .TimelineMenu .timeline-menu-title {
5203 -webkit-user-select: none
;
5204 -moz-user-select: none
;
5205 -ms-user-select: none
;
5208 display: -ms-flexbox
;
5211 .TimelineMenu .timeline-menu-title .timeline-menu-name {
5213 text-overflow: ellipsis
;
5214 white-space: nowrap
;
5216 .TimelineMenu .timeline-menu-title svg {
5218 transition: transform
100ms;
5220 .TimelineMenu .timeline-menu-title .click-blocker {
5222 -ms-flex-positive: 1;
5225 .TimelineMenu.open .timeline-menu-title svg {
5227 color: var
(--panelText
, #b9b9ba);
5228 transform: rotate
(180deg);
5230 .TimelineMenu .panel {
5231 box-shadow: var
(--popoverShadow
);
5239 border-bottom: 1px solid
;
5241 border-color: var
(--border
, #222);
5244 .TimelineMenu li:last-child a {
5245 border-bottom-right-radius: 10px;
5246 border-bottom-right-radius: var
(--panelRadius
, 10px);
5247 border-bottom-left-radius: 10px;
5248 border-bottom-left-radius: var
(--panelRadius
, 10px);
5250 .TimelineMenu li:last-child {
5255 padding: 0.6em 0.65em;
5257 .TimelineMenu a:hover {
5258 background-color: #151e2a;
5259 background-color: var
(--selectedMenu
, #151e2a);
5261 color: var
(--selectedMenuText
, #d8a070);
5262 --faint: var
(--selectedMenuFaintText
, $fallback--faint
);
5263 --faintLink: var
(--selectedMenuFaintLink
, $fallback--faint
);
5264 --lightText: var
(--selectedMenuLightText
, $fallback--lightText
);
5265 --icon: var
(--selectedMenuIcon
, $fallback--icon
);
5267 .TimelineMenu a.router-link-active {
5268 font-weight: bolder
;
5269 background-color: #151e2a;
5270 background-color: var
(--selectedMenu
, #151e2a);
5272 color: var
(--selectedMenuText
, #b9b9ba);
5273 --faint: var
(--selectedMenuFaintText
, $fallback--faint
);
5274 --faintLink: var
(--selectedMenuFaintLink
, $fallback--faint
);
5275 --lightText: var
(--selectedMenuLightText
, $fallback--lightText
);
5276 --icon: var
(--selectedMenuIcon
, $fallback--icon
);
5278 .TimelineMenu a.router-link-active:hover {
5279 text-decoration: underline
;
5281 .TimelineMenu a svg {
5282 margin-right: 0.4em;
5283 margin-left: -0.2em;
5285 .TimelineQuickSettings > button {
5288 width: var
(--__panel-heading-height-inner
);
5291 .TimelineQuickSettings > button svg {
5294 .Timeline .loadmore-text {
5297 .Timeline.-blocked {
5300 .Timeline .conversation-heading {
5301 top: calc
(var
(--__panel-heading-height
) * var
(--currentPanelStack
, 2));
5304 .Timeline.-nonpanel .timeline-heading {
5306 line-height: 2.75em;
5309 .Timeline.-nonpanel .timeline-heading .button-default, .Timeline.-nonpanel .timeline-heading .alert {
5314 display: -ms-flexbox
;
5317 .tab-switcher .tab-icon {
5321 .tab-switcher.top-tabs {
5322 -ms-flex-direction: column
;
5323 flex-direction: column
;
5325 .tab-switcher.top-tabs > .tabs {
5330 -ms-flex-direction: row
;
5331 flex-direction: row
;
5333 .tab-switcher.top-tabs > .tabs::after, .tab-switcher.top-tabs > .tabs::before {
5337 border-bottom: 1px solid
;
5338 border-bottom-color: #222;
5339 border-bottom-color: var
(--border
, #222);
5341 .tab-switcher.top-tabs > .tabs .tab-wrapper {
5344 .tab-switcher.top-tabs > .tabs .tab-wrapper:not(.active)::after {
5348 border-bottom: 1px solid
;
5349 border-bottom-color: #222;
5350 border-bottom-color: var
(--border
, #222);
5352 .tab-switcher.top-tabs > .tabs .tab {
5355 border-bottom-left-radius: 0;
5356 border-bottom-right-radius: 0;
5357 padding-bottom: 99px;
5358 margin-bottom: -93px;
5360 .tab-switcher.top-tabs .contents.scrollable-tabs {
5361 -ms-flex-preferred-size: 0;
5364 .tab-switcher.side-tabs {
5365 -ms-flex-direction: row
;
5366 flex-direction: row
;
5368 @media all and
(max-width: 800px) {
5369 .tab-switcher.side-tabs {
5373 .tab-switcher.side-tabs > .contents {
5377 .tab-switcher.side-tabs > .tabs {
5382 -ms-flex-direction: column
;
5383 flex-direction: column
;
5385 .tab-switcher.side-tabs > .tabs::after, .tab-switcher.side-tabs > .tabs::before {
5386 -ms-flex-negative: 0;
5388 -ms-flex-preferred-size: 0.5em;
5391 border-right: 1px solid
;
5392 border-right-color: #222;
5393 border-right-color: var
(--border
, #222);
5395 .tab-switcher.side-tabs > .tabs::after {
5396 -ms-flex-positive: 1;
5399 .tab-switcher.side-tabs > .tabs::before {
5400 -ms-flex-positive: 0;
5403 .tab-switcher.side-tabs > .tabs .tab-wrapper {
5405 display: -ms-flexbox
;
5407 -ms-flex-direction: column
;
5408 flex-direction: column
;
5410 @media all and
(max-width: 800px) {
5411 .tab-switcher.side-tabs > .tabs .tab-wrapper {
5415 .tab-switcher.side-tabs > .tabs .tab-wrapper:not(.active)::after {
5419 border-right: 1px solid
;
5420 border-right-color: #222;
5421 border-right-color: var
(--border
, #222);
5423 .tab-switcher.side-tabs > .tabs .tab-wrapper::before {
5427 border-right: 1px solid
;
5428 border-right-color: #222;
5429 border-right-color: var
(--border
, #222);
5431 .tab-switcher.side-tabs > .tabs .tab-wrapper:last-child .tab {
5434 .tab-switcher.side-tabs > .tabs .tab {
5437 box-sizing: content-box
;
5440 border-top-right-radius: 0;
5441 border-bottom-right-radius: 0;
5443 padding-right: calc
(1em + 200px);
5444 margin-right: -200px;
5447 @media all and
(max-width: 800px) {
5448 .tab-switcher.side-tabs > .tabs .tab {
5449 padding-left: 0.25em;
5450 padding-right: calc
(.25em + 200px);
5451 margin-right: calc
(.25em - 200px);
5452 margin-left: 0.25em;
5454 .tab-switcher.side-tabs > .tabs .tab .text {
5458 .tab-switcher .contents {
5463 .tab-switcher .contents .hidden {
5466 .tab-switcher .contents .full-height:not(.hidden) {
5468 display: -ms-flexbox
;
5470 -ms-flex-direction: column
;
5471 flex-direction: column
;
5473 .tab-switcher .contents .full-height:not(.hidden) > *:not(.mobile-label) {
5477 .tab-switcher .contents.scrollable-tabs {
5480 .tab-switcher .tab {
5482 white-space: nowrap
;
5485 .tab-switcher .tab:not(.active) {
5488 .tab-switcher .tab:not(.active):hover {
5491 .tab-switcher .tab.active {
5492 background: transparent
;
5495 color: var
(--tabActiveText
, #b9b9ba);
5497 .tab-switcher .tab img {
5499 vertical-align: top
;
5502 .tab-switcher .tabs {
5503 display: -ms-flexbox
;
5506 box-sizing: border-box
;
5508 .tab-switcher .tabs::after, .tab-switcher .tabs::before {
5513 .tab-switcher .tab-wrapper {
5515 display: -ms-flexbox
;
5520 .tab-switcher .tab-wrapper:not(.active)::after {
5525 .tab-switcher .mobile-label {
5526 padding-left: 0.3em;
5527 padding-bottom: 0.25em;
5530 margin-bottom: 0.25em;
5531 border-bottom: 1px solid var
(--border
, #222);
5533 @media all and
(min-width: 800px) {
5534 .tab-switcher .mobile-label {
5539 display: -ms-flexbox
;
5542 text-overflow: ellipsis
;
5543 white-space: nowrap
;
5546 .chat-title .username {
5548 text-overflow: ellipsis
;
5549 white-space: nowrap
;
5551 word-wrap: break-word
;
5554 .chat-title .avatar-container {
5555 -ms-flex-item-align: center
;
5556 -ms-grid-row-align: center
;
5560 .chat-title .titlebar-avatar {
5561 margin-right: 0.5em;
5564 border-radius: 10px;
5565 border-radius: var
(--avatarAltRadius
, 10px);
5567 .chat-title .titlebar-avatar.animated::before {
5571 display: -ms-flexbox
;
5573 -ms-flex-direction: row
;
5574 flex-direction: row
;
5578 box-sizing: border-box
;
5581 .chat-list-item :focus {
5584 .chat-list-item:hover {
5585 background-color: var
(--selectedPost
, #151e2a);
5586 box-shadow: 0 0 3px 1px rgba
(0, 0, 0, 0.1);
5588 .chat-list-item .chat-list-item-left {
5591 .chat-list-item .chat-list-item-center {
5593 box-sizing: border-box
;
5595 word-wrap: break-word
;
5597 .chat-list-item .heading {
5599 display: -ms-inline-flexbox
;
5600 display: inline-flex
;
5601 -ms-flex-pack: justify
;
5602 justify-content: space-between
;
5605 .chat-list-item .heading-right {
5606 white-space: nowrap
;
5608 .chat-list-item .name-and-account-name {
5609 text-overflow: ellipsis
;
5610 white-space: nowrap
;
5612 -ms-flex-negative: 1;
5614 line-height: var
(--post-line-height
);
5616 .chat-list-item .chat-preview {
5617 display: -ms-inline-flexbox
;
5618 display: inline-flex
;
5620 white-space: nowrap
;
5621 text-overflow: ellipsis
;
5624 color: var
(--faint
, #b9b9ba);
5628 color: var
(--faintLink
, #d8a070);
5629 text-decoration: none
;
5630 pointer-events: none
;
5632 .chat-list-item:hover .animated.avatar canvas {
5635 .chat-list-item:hover .animated.avatar img {
5636 visibility: visible
;
5638 .chat-list-item .Avatar {
5639 border-radius: 10px;
5640 border-radius: var
(--avatarAltRadius
, 10px);
5642 .chat-list-item .chat-preview-body {
5643 --emoji-size: 1.4em;
5645 .chat-list-item .time-wrapper {
5646 line-height: var
(--post-line-height
);
5648 .chat-list-item .chat-preview-body {
5652 display: -ms-flexbox
;
5659 .basic-user-card-collapsed-content {
5666 .basic-user-card-user-name img {
5667 -o-object-fit: contain
;
5668 object-fit: contain
;
5671 vertical-align: middle
;
5673 .basic-user-card-user-name-value, .basic-user-card-screen-name {
5674 display: inline-block
;
5677 white-space: nowrap
;
5678 text-overflow: ellipsis
;
5680 .basic-user-card-expanded-content {
5686 .chat-new .input-wrap {
5687 display: -ms-flexbox
;
5689 margin: 0.7em 0.5em 0.7em 0.5em;
5691 .chat-new .input-wrap input {
5694 .chat-new .search-icon {
5695 margin-right: 0.3em;
5697 .chat-new .member-list {
5698 padding-bottom: 0.7rem;
5700 .chat-new .basic-user-card:hover {
5702 background-color: var
(--selectedPost
, #151e2a);
5704 .chat-new .go-back-button {
5708 -ms-flex-item-align: start
;
5709 -ms-grid-row-align: start
;
5711 width: var
(--__panel-heading-height-inner
);
5717 .emtpy-chat-list-alert {
5720 display: -ms-flexbox
;
5722 -ms-flex-pack: center
;
5723 justify-content: center
;
5725 color: var
(--faint
, #b9b9ba);
5727 .chat-message-wrapper.hovered-message-chain .animated.Avatar canvas {
5730 .chat-message-wrapper.hovered-message-chain .animated.Avatar img {
5731 visibility: visible
;
5733 .chat-message-wrapper .chat-message-menu {
5734 transition: opacity
0.1s;
5739 .chat-message-wrapper .chat-message-menu button {
5741 padding-bottom: 0.2em;
5743 .chat-message-wrapper .menu-icon {
5746 .chat-message-wrapper .menu-icon:hover, .extra-button-popover.open .chat-message-wrapper .menu-icon {
5748 color: var
(--text
, #b9b9ba);
5750 .chat-message-wrapper .popover {
5753 .chat-message-wrapper .chat-message {
5754 display: -ms-flexbox
;
5756 padding-bottom: 0.5em;
5758 .chat-message-wrapper .chat-message .status-body:hover {
5759 --_still-image-img-visibility: visible
;
5760 --_still-image-canvas-visibility: hidden
;
5761 --_still-image-label-visibility: hidden
;
5763 .chat-message-wrapper .avatar-wrapper {
5764 margin-right: 0.72em;
5767 .chat-message-wrapper .link-preview, .chat-message-wrapper .attachments {
5770 .chat-message-wrapper .chat-message-inner {
5771 display: -ms-flexbox
;
5773 -ms-flex-direction: column
;
5774 flex-direction: column
;
5775 -ms-flex-align: start
;
5776 align-items: flex-start
;
5781 .chat-message-wrapper .chat-message-inner.with-media {
5784 .chat-message-wrapper .chat-message-inner.with-media .status {
5787 .chat-message-wrapper .status {
5788 border-radius: 10px;
5789 border-radius: var
(--chatMessageRadius
, 10px);
5790 display: -ms-flexbox
;
5794 .chat-message-wrapper .created-at {
5798 margin: -1em 0 -0.5em 0;
5802 .chat-message-wrapper .without-attachment .message-content .RichContent::after {
5803 margin-right: 5.4em;
5805 display: inline-block
;
5807 .chat-message-wrapper .pending .status-content.media-body, .chat-message-wrapper .pending .created-at {
5808 color: var
(--faint
);
5810 .chat-message-wrapper .error .status-content.media-body, .chat-message-wrapper .error .created-at {
5812 color: var
(--badgeNotification
, #ff0000);
5814 .chat-message-wrapper .incoming a {
5815 color: var
(--chatMessageIncomingLink
, #d8a070);
5817 .chat-message-wrapper .incoming .status {
5818 color: var
(--chatMessageIncomingText
, #b9b9ba);
5819 background-color: var
(--chatMessageIncomingBg
, #121a24);
5820 border: 1px solid var
(--chatMessageIncomingBorder
, --border
);
5822 .chat-message-wrapper .incoming .created-at a {
5823 color: var
(--chatMessageIncomingText
, #b9b9ba);
5825 .chat-message-wrapper .incoming .chat-message-menu {
5828 .chat-message-wrapper .outgoing {
5829 display: -ms-flexbox
;
5831 -ms-flex-direction: row
;
5832 flex-direction: row
;
5833 -ms-flex-wrap: wrap
;
5835 -ms-flex-line-pack: end
;
5838 justify-content: flex-end
;
5840 .chat-message-wrapper .outgoing a {
5841 color: var
(--chatMessageOutgoingLink
, #d8a070);
5843 .chat-message-wrapper .outgoing .status {
5844 color: var
(--chatMessageOutgoingText
, #b9b9ba);
5845 background-color: var
(--chatMessageOutgoingBg
, #151e2a);
5846 border: 1px solid var
(--chatMessageOutgoingBorder
, --lightBg
);
5848 .chat-message-wrapper .outgoing .chat-message-inner {
5849 -ms-flex-align: end
;
5850 align-items: flex-end
;
5852 .chat-message-wrapper .outgoing .chat-message-menu {
5855 .chat-message-wrapper .visible {
5858 .chat-message-date-separator {
5862 -webkit-user-select: none
;
5863 -moz-user-select: none
;
5864 -ms-user-select: none
;
5867 color: var
(--faintedText
, #b9b9ba);
5870 display: -ms-flexbox
;
5874 .chat-view .chat-view-inner {
5878 display: -ms-flexbox
;
5881 .chat-view .chat-view-body {
5882 box-sizing: border-box
;
5883 background-color: var
(--chatBg
, #121a24);
5884 display: -ms-flexbox
;
5886 -ms-flex-direction: column
;
5887 flex-direction: column
;
5890 min-height: calc
(100vh - var
(--navbar-height
));
5892 border-radius: 10px 10px 0 0;
5893 border-radius: var
(--panelRadius
, 10px) var
(--panelRadius
, 10px) 0 0;
5895 .chat-view .chat-view-body::after {
5898 .chat-view .message-list {
5901 display: -ms-flexbox
;
5903 -ms-flex-direction: column
;
5904 flex-direction: column
;
5906 justify-content: end
;
5908 .chat-view .footer {
5909 position: -webkit-sticky
;
5912 background-color: #121a24;
5913 background-color: var
(--bg
, #121a24);
5916 .chat-view .chat-view-heading {
5917 -ms-grid-columns: auto minmax
(50%, 1fr);
5918 grid-template-columns: auto minmax
(50%, 1fr);
5920 .chat-view .go-back-button {
5924 -ms-flex-item-align: start
;
5925 -ms-grid-row-align: start
;
5927 width: var
(--__panel-heading-height-inner
);
5929 .chat-view .jump-to-bottom-button {
5932 border-radius: 100%;
5936 background-color: #182230;
5937 background-color: var
(--btn
, #182230);
5938 display: -ms-flexbox
;
5940 -ms-flex-pack: center
;
5941 justify-content: center
;
5942 -ms-flex-align: center
;
5943 align-items: center
;
5944 box-shadow: 0 1px 1px rgba
(0, 0, 0, 0.3), 0 2px 4px rgba
(0, 0, 0, 0.3);
5946 transition: 0.35s all
;
5947 transition-timing-function: cubic-bezier
(0, 1, 0.5, 1);
5952 .chat-view .jump-to-bottom-button.visible {
5954 visibility: visible
;
5956 .chat-view .jump-to-bottom-button i {
5959 color: var
(--text
, #b9b9ba);
5961 .chat-view .jump-to-bottom-button .unread-message-count {
5966 border-radius: 50px;
5969 .chat-view .jump-to-bottom-button .chat-loading-error {
5971 display: -ms-flexbox
;
5973 -ms-flex-align: end
;
5974 align-items: flex-end
;
5977 .chat-view .jump-to-bottom-button .chat-loading-error .error {
5980 .follow-card-content-container {
5981 -ms-flex-negative: 0;
5983 display: -ms-flexbox
;
5985 -ms-flex-direction: row
;
5986 flex-direction: row
;
5987 -ms-flex-pack: justify
;
5988 justify-content: space-between
;
5989 -ms-flex-wrap: wrap
;
5993 .follow-card-follow-button {
5998 .with-load-more-footer {
6001 border-top: 1px solid
;
6002 border-top-color: #222;
6003 border-top-color: var
(--border
, #222);
6005 .with-load-more-footer .error {
6008 .with-load-more-footer a {
6014 -ms-flex-preferred-size: 500px;
6016 --currentPanelStack: 1;
6018 .user-profile .user-profile-fields {
6021 .user-profile .user-profile-fields img {
6022 -o-object-fit: contain
;
6023 object-fit: contain
;
6024 vertical-align: middle
;
6028 .user-profile .user-profile-fields img.emoji {
6032 .user-profile .user-profile-fields .user-profile-field {
6033 display: -ms-flexbox
;
6036 border: 1px solid var
(--border
, #222);
6038 border-radius: var
(--inputRadius
, 4px);
6040 .user-profile .user-profile-fields .user-profile-field .user-profile-field-name {
6045 color: var
(--lightText
);
6047 border-right: 1px solid var
(--border
, #222);
6049 .user-profile .user-profile-fields .user-profile-field .user-profile-field-value {
6053 margin: 0 0 0 0.25em;
6055 .user-profile .user-profile-fields .user-profile-field .user-profile-field-name, .user-profile .user-profile-fields .user-profile-field .user-profile-field-value {
6057 text-overflow: ellipsis
;
6058 white-space: nowrap
;
6060 padding: 0.5em 1.5em;
6061 box-sizing: border-box
;
6063 .user-profile .userlist-placeholder {
6064 display: -ms-flexbox
;
6066 -ms-flex-pack: center
;
6067 justify-content: center
;
6068 -ms-flex-align: middle
;
6069 align-items: middle
;
6072 .user-profile-placeholder .panel-body {
6073 display: -ms-flexbox
;
6075 -ms-flex-pack: center
;
6076 justify-content: center
;
6077 -ms-flex-align: middle
;
6078 align-items: middle
;
6081 .search-result-heading {
6082 color: rgba
(185, 185, 186, 0.5);
6083 color: var
(--faint
, rgba
(185, 185, 186, 0.5));
6087 @media all and
(max-width: 800px) {
6088 .search-nav-heading .tab-switcher .tabs .tab-wrapper {
6090 -ms-flex-pack: center
;
6091 justify-content: center
;
6098 box-sizing: border-box
;
6099 border-bottom: 1px solid
;
6101 border-color: var
(--border
, #222);
6103 .search-result-footer {
6104 border-width: 1px 0 0 0;
6105 border-style: solid
;
6106 border-color: var
(--border
, #222);
6108 background-color: #182230;
6109 background-color: var
(--panel
, #182230);
6111 .search-input-container {
6113 display: -ms-flexbox
;
6115 -ms-flex-pack: center
;
6116 justify-content: center
;
6118 .search-input-container .search-input {
6120 line-height: 1.125rem;
6123 box-sizing: border-box
;
6125 .search-input-container .search-button {
6132 display: -ms-flexbox
;
6134 -ms-flex-align: center
;
6135 align-items: center
;
6141 color: var
(--text
, #b9b9ba);
6143 text-overflow: ellipsis
;
6144 white-space: nowrap
;
6151 line-height: 2.25rem;
6155 color: var
(--text
, #b9b9ba);
6158 .registration-form {
6159 display: -ms-flexbox
;
6161 -ms-flex-direction: column
;
6162 flex-direction: column
;
6165 .registration-form .container {
6166 display: -ms-flexbox
;
6168 -ms-flex-direction: row
;
6169 flex-direction: row
;
6171 .registration-form .container > * {
6174 .registration-form .terms-of-service {
6179 .registration-form .text-fields {
6183 display: -ms-flexbox
;
6185 -ms-flex-direction: column
;
6186 flex-direction: column
;
6188 .registration-form textarea {
6192 .registration-form .form-group {
6193 display: -ms-flexbox
;
6195 -ms-flex-direction: column
;
6196 flex-direction: column
;
6201 .registration-form .form-group--error {
6202 animation-name: shakeError
;
6203 animation-duration: 0.6s;
6204 animation-timing-function: ease-in-out
;
6206 .registration-form .form-group--error .form--label {
6208 color: var
(--cRed
, #f04124);
6210 .registration-form .form-error {
6214 .registration-form .form-error span {
6217 .registration-form .form-error ul {
6222 .registration-form .form-error ul li::before {
6225 .registration-form form textarea {
6229 .registration-form .captcha {
6231 margin-bottom: 0.4em;
6233 .registration-form .btn {
6237 .registration-form .error {
6240 @media all and
(max-width: 800px) {
6241 .registration-form .container {
6242 -ms-flex-direction: column-reverse
;
6243 flex-direction: column-reverse
;
6246 .password-reset-form {
6247 display: -ms-flexbox
;
6249 -ms-flex-direction: column
;
6250 flex-direction: column
;
6251 -ms-flex-align: center
;
6252 align-items: center
;
6255 .password-reset-form .container {
6256 display: -ms-flexbox
;
6260 -ms-flex-direction: column
;
6261 flex-direction: column
;
6265 .password-reset-form .container > * {
6268 .password-reset-form .form-group {
6269 display: -ms-flexbox
;
6271 -ms-flex-direction: column
;
6272 flex-direction: column
;
6275 line-height: 1.85em;
6277 .password-reset-form .error {
6279 animation-name: shakeError
;
6280 animation-duration: 0.4s;
6281 animation-timing-function: ease-in-out
;
6283 .password-reset-form .alert {
6285 margin: 0.3em 0 1em;
6287 .password-reset-form .password-reset-required {
6288 background-color: var
(--alertError
, rgba
(211, 16, 20, 0.5));
6291 .password-reset-form .notice-dismissible {
6292 padding-right: 2rem;
6294 .password-reset-form .dismiss {
6297 .follow-request-card-content-container {
6298 display: -ms-flexbox
;
6300 -ms-flex-direction: row
;
6301 flex-direction: row
;
6302 -ms-flex-wrap: wrap
;
6305 .follow-request-card-content-container button {
6307 margin-right: 0.5em;
6313 .follow-request-card-content-container button:last-child {
6323 .staff-group .basic-user-card {
6329 .mrf-section table {
6333 padding-bottom: 20px;
6335 .mrf-section table th, .mrf-section table td {
6339 vertical-align: text-top
;
6341 .mrf-section table th + th, .mrf-section table td + td {
6345 /*# sourceMappingURL=app.ea8ec0bbcc083797019b.css.map*/