direct_conversation_status.scss (3961B)
1 @import '../../_variables.scss';
2
3 .direct-conversation-status-wrapper {
4 &.sequence-hovered {
5 .animated.avatar {
6 canvas {
7 display: none;
8 }
9 img {
10 visibility: visible;
11 }
12 }
13 }
14
15 &:last-child {
16 margin-bottom: 16px;
17 }
18
19 .media-heading {
20 margin-left: 43px;
21 margin-bottom: 4px;
22 }
23
24 .status {
25 padding: 0.75em;
26 }
27
28 .direct-conversation {
29 overflow-wrap: break-word;
30 word-wrap: break-word;
31 word-break: break-word;
32 border-left-width: 0px;
33 min-width: 0;
34 display: flex;
35 width: 100%;
36 padding-bottom: 7px;
37
38 .avatar-wrapper {
39 margin-right: 10px;
40 margin-top: auto;
41 width: 32px;
42 }
43
44 .link-preview, .attachments {
45 margin-bottom: 0.9em;
46 }
47
48 .status-content {
49 line-height: 1.4em;
50 }
51
52 .direct-conversation-inner {
53 display: flex;
54 flex-direction: column;
55 align-items: flex-start;
56 max-width: 80%;
57 position: relative;
58 float: right;
59 min-width: 10rem;
60
61 .trigger {
62 width: 100%;
63 }
64
65 .popover {
66 width: 12rem;
67
68 .tooltip-arrow.popover-arrow {
69 // overrides inline html arrow position
70 left: calc(100% - 30px) !important;
71 }
72 }
73
74 .poll {
75 margin-bottom: 1em;
76 }
77
78 &.with-media {
79 width: 100%;
80
81 .gallery-row {
82 overflow: hidden;
83 }
84
85 .status {
86 width: 100%;
87 }
88 }
89
90 .status {
91 box-sizing: border-box;
92 border-radius: $fallback--directConversationRadius;
93 border-radius: var(--directConversationRadius, $fallback--directConversationRadius);
94 }
95
96 .created-at {
97 float: right;
98 font-size: 0.8em;
99 margin: -10px 0 -5px 4px;
100 position: relative;
101 font-style: italic;
102 opacity: 0.8;
103 a {
104 color: var(--directConversationOutgoingText, $fallback--text);
105 }
106
107 ::before {
108 font-size: 1em;
109 }
110 }
111
112 .status-content {
113 white-space: normal;
114
115 &::after {
116 margin-right: 75px;
117 content: " ";
118 display: inline-block;
119 }
120 }
121 }
122
123 &.incoming {
124 .status {
125 background-color: var(--directConversationIncomingBg, $fallback--bg);
126 border: 1px solid var(--directConversationIncomingBorder, --border);
127 color: var(--directConversationIncomingText, $fallback--text);
128
129 a {
130 color: var(--directConversationIncomingLink, $fallback--link);
131 }
132 }
133 .created-at {
134 a {
135 color: var(--directConversationIncomingText, $fallback--text);
136 }
137 }
138 }
139
140 &.outgoing {
141 display: flex;
142 flex-direction: row;
143 flex-wrap: wrap;
144 align-content: end;
145 justify-content: flex-end;
146
147 a {
148 color: var(--directConversationOutgoingLink, $fallback--link);
149 }
150
151 .direct-conversation-menu {
152 float: right;
153 margin-bottom: 3px;
154 position: absolute;
155 bottom: -19px;
156 right: 16px;
157 background-color: var(--directConversationOutgoingBg, $fallback--lightBg);
158 z-index: 200;
159
160 a {
161 cursor: pointer;
162 }
163
164 .delete-link {
165 color: $fallback--cRed;
166 color: var(--cRed, $fallback--cRed);
167 }
168 }
169
170 .status {
171 border: 1px solid var(--directConversationOutgoingBorder, --lightBg);
172 color: var(--directConversationOutgoingText, $fallback--text);
173 background-color: var(--directConversationOutgoingBg, $fallback--lightBg);
174
175 &.media {
176 cursor: pointer;
177 }
178 }
179
180 .direct-conversation-inner {
181 align-items: flex-end;
182 }
183 }
184 }
185 }
186
187 .date-separator {
188 text-align: center;
189 margin: 1.4em 0;
190 font-size: 0.9em;
191 user-select: none;
192 color: $fallback--text;
193 color: var(--faintedText, $fallback--text);
194 }