conversejs-rails 3.2.0 → 3.3.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (7) hide show
  1. checksums.yaml +5 -5
  2. data/LICENSE.txt +1 -1
  3. data/README.md +1 -1
  4. data/lib/conversejs/rails/version.rb +1 -1
  5. data/vendor/assets/javascripts/converse.js +34307 -39694
  6. data/vendor/assets/stylesheets/converse.css +439 -323
  7. metadata +5 -5
data/vendor/assets/stylesheets/converse.css CHANGED
@@ -17,6 +17,7 @@
17
17
  font-weight: normal;
18
18
  font-style: normal; }
19
19
  .icon-conversejs {
20
+ padding-right: 0.2em;
20
21
  font-family: 'Converse-js';
21
22
  speak: none;
22
23
  font-style: normal;
@@ -34,9 +35,6 @@
34
35
  #converse-embedded-chat .icon-address-book:before,
35
36
  #conversejs .icon-address-book:before {
36
37
  content: "\270f"; }
37
- #converse-embedded-chat .icon-angry:before,
38
- #conversejs .icon-angry:before {
39
- content: "\e03f"; }
40
38
  #converse-embedded-chat .icon-attachment:before,
41
39
  #conversejs .icon-attachment:before {
42
40
  content: "\e032"; }
@@ -49,36 +47,24 @@
49
47
  #converse-embedded-chat .icon-bold:before,
50
48
  #conversejs .icon-bold:before {
51
49
  content: "\e04d"; }
52
- #converse-embedded-chat .icon-bubbles-2:before,
53
- #conversejs .icon-bubbles-2:before {
50
+ #converse-embedded-chat .icon-bubbles2:before,
51
+ #conversejs .icon-bubbles2:before {
54
52
  content: "\e016"; }
55
- #converse-embedded-chat .icon-bubbles-3:before,
56
- #conversejs .icon-bubbles-3:before {
53
+ #converse-embedded-chat .icon-bubbles3:before,
54
+ #conversejs .icon-bubbles3:before {
57
55
  content: "\e017"; }
58
56
  #converse-embedded-chat .icon-bubbles:before,
59
57
  #conversejs .icon-bubbles:before {
60
58
  content: "\e015"; }
61
- #converse-embedded-chat .icon-camera-2:before,
62
- #conversejs .icon-camera-2:before {
63
- content: "\2616"; }
64
- #converse-embedded-chat .icon-camera:before,
65
- #conversejs .icon-camera:before {
66
- content: "\e003"; }
59
+ #converse-embedded-chat .icon-busy:before,
60
+ #conversejs .icon-busy:before {
61
+ content: "\e004"; }
62
+ #converse-embedded-chat .icon-dnd:before,
63
+ #conversejs .icon-dnd:before {
64
+ content: "\e004"; }
67
65
  #converse-embedded-chat .icon-cancel-circle:before,
68
66
  #conversejs .icon-cancel-circle:before {
69
67
  content: "\e058"; }
70
- #converse-embedded-chat .icon-chat:before,
71
- #conversejs .icon-chat:before {
72
- content: "\25fc"; }
73
- #converse-embedded-chat .icon-checkbox-checked:before,
74
- #conversejs .icon-checkbox-checked:before {
75
- content: "\2611"; }
76
- #converse-embedded-chat .icon-checkbox-partial:before,
77
- #conversejs .icon-checkbox-partial:before {
78
- content: "\2b28"; }
79
- #converse-embedded-chat .icon-checkbox-unchecked:before,
80
- #conversejs .icon-checkbox-unchecked:before {
81
- content: "\2b27"; }
82
68
  #converse-embedded-chat .icon-checkmark:before,
83
69
  #conversejs .icon-checkmark:before {
84
70
  content: "\2713"; }
@@ -94,45 +80,48 @@
94
80
  #converse-embedded-chat .icon-cogs:before,
95
81
  #conversejs .icon-cogs:before {
96
82
  content: "\e022"; }
97
- #converse-embedded-chat .icon-confused:before,
98
- #conversejs .icon-confused:before {
99
- content: "\2368"; }
100
- #converse-embedded-chat .icon-cool:before,
101
- #conversejs .icon-cool:before {
102
- content: "\e040"; }
83
+ #converse-embedded-chat .icon-conversejs:before,
84
+ #conversejs .icon-conversejs:before {
85
+ content: "\e600"; }
103
86
  #converse-embedded-chat .icon-database:before,
104
87
  #conversejs .icon-database:before {
105
88
  content: "\f1c0"; }
106
- #converse-embedded-chat .icon-dnd:before,
107
- #conversejs .icon-dnd:before {
108
- content: "\e004"; }
109
- #converse-embedded-chat .icon-envelop:before,
110
- #conversejs .icon-envelop:before {
111
- content: "\2709"; }
112
- #converse-embedded-chat .icon-evil:before,
113
- #conversejs .icon-evil:before {
114
- content: "\261f"; }
89
+ #converse-embedded-chat .icon-envelope:before,
90
+ #conversejs .icon-envelope:before {
91
+ content: "\f003"; }
92
+ #converse-embedded-chat .icon-exit:before,
93
+ #conversejs .icon-exit:before {
94
+ content: "\e601"; }
115
95
  #converse-embedded-chat .icon-eye-blocked:before,
116
96
  #conversejs .icon-eye-blocked:before {
117
97
  content: "\e031"; }
118
98
  #converse-embedded-chat .icon-eye:before,
119
99
  #conversejs .icon-eye:before {
120
100
  content: "\e030"; }
101
+ #converse-embedded-chat .icon-github:before,
102
+ #conversejs .icon-github:before {
103
+ content: "\eab0"; }
121
104
  #converse-embedded-chat .icon-globe:before,
122
105
  #conversejs .icon-globe:before {
123
106
  content: "\f0ac"; }
124
- #converse-embedded-chat .icon-grin:before,
125
- #conversejs .icon-grin:before {
126
- content: "\e041"; }
107
+ #converse-embedded-chat .icon-google2:before,
108
+ #conversejs .icon-google2:before {
109
+ content: "\ea89"; }
110
+ #converse-embedded-chat .icon-group:before,
111
+ #conversejs .icon-group:before {
112
+ content: "\f0c0"; }
127
113
  #converse-embedded-chat .icon-happy:before,
128
114
  #conversejs .icon-happy:before {
129
115
  content: "\263b"; }
130
- #converse-embedded-chat .icon-headphones:before,
131
- #conversejs .icon-headphones:before {
132
- content: "\266c"; }
116
+ #converse-embedded-chat .icon-heart2:before,
117
+ #conversejs .icon-heart2:before {
118
+ content: "\f004"; }
133
119
  #converse-embedded-chat .icon-heart:before,
134
120
  #conversejs .icon-heart:before {
135
121
  content: "\2764"; }
122
+ #converse-embedded-chat .icon-heart_empty:before,
123
+ #conversejs .icon-heart_empty:before {
124
+ content: "\f08a"; }
136
125
  #converse-embedded-chat .icon-hide-users:before,
137
126
  #conversejs .icon-hide-users:before {
138
127
  content: "\e01c"; }
@@ -148,18 +137,12 @@
148
137
  #converse-embedded-chat .icon-image:before,
149
138
  #conversejs .icon-image:before {
150
139
  content: "\2b14"; }
151
- #converse-embedded-chat .icon-info-2:before,
152
- #conversejs .icon-info-2:before {
153
- content: "i"; }
154
140
  #converse-embedded-chat .icon-info:before,
155
141
  #conversejs .icon-info:before {
156
142
  content: "\2360"; }
157
143
  #converse-embedded-chat .icon-italic:before,
158
144
  #conversejs .icon-italic:before {
159
145
  content: "\e04f"; }
160
- #converse-embedded-chat .icon-key-2:before,
161
- #conversejs .icon-key-2:before {
162
- content: "\e029"; }
163
146
  #converse-embedded-chat .icon-key:before,
164
147
  #conversejs .icon-key:before {
165
148
  content: "\e028"; }
@@ -169,24 +152,15 @@
169
152
  #converse-embedded-chat .icon-lock:before,
170
153
  #conversejs .icon-lock:before {
171
154
  content: "\e027"; }
172
- #converse-embedded-chat .icon-logout:before,
173
- #conversejs .icon-logout:before {
174
- content: "\e601"; }
175
- #converse-embedded-chat .icon-leave:before,
176
- #conversejs .icon-leave:before {
177
- content: "\e601"; }
178
155
  #converse-embedded-chat .icon-minus:before,
179
156
  #conversejs .icon-minus:before {
180
157
  content: "\e05a"; }
181
158
  #converse-embedded-chat .icon-music:before,
182
159
  #conversejs .icon-music:before {
183
160
  content: "\266b"; }
184
- #converse-embedded-chat .icon-new-tab:before,
185
- #conversejs .icon-new-tab:before {
161
+ #converse-embedded-chat .icon-newtab:before,
162
+ #conversejs .icon-newtab:before {
186
163
  content: "\e053"; }
187
- #converse-embedded-chat .icon-newspaper:before,
188
- #conversejs .icon-newspaper:before {
189
- content: "\e001"; }
190
164
  #converse-embedded-chat .icon-notebook:before,
191
165
  #conversejs .icon-notebook:before {
192
166
  content: "\2710"; }
@@ -196,6 +170,9 @@
196
170
  #converse-embedded-chat .icon-offline:before,
197
171
  #conversejs .icon-offline:before {
198
172
  content: "\e002"; }
173
+ #converse-embedded-chat .icon-logout:before,
174
+ #conversejs .icon-logout:before {
175
+ content: "\e002"; }
199
176
  #converse-embedded-chat .icon-online:before,
200
177
  #conversejs .icon-online:before {
201
178
  content: "\25fc"; }
@@ -211,9 +188,6 @@
211
188
  #converse-embedded-chat .icon-phone:before,
212
189
  #conversejs .icon-phone:before {
213
190
  content: "\260f"; }
214
- #converse-embedded-chat .icon-play:before,
215
- #conversejs .icon-play:before {
216
- content: "\25d9"; }
217
191
  #converse-embedded-chat .icon-plus:before,
218
192
  #conversejs .icon-plus:before {
219
193
  content: "\271a"; }
@@ -223,33 +197,21 @@
223
197
  #converse-embedded-chat .icon-quotes-left:before,
224
198
  #conversejs .icon-quotes-left:before {
225
199
  content: "\e01d"; }
226
- #converse-embedded-chat .icon-radio-checked:before,
227
- #conversejs .icon-radio-checked:before {
228
- content: "\2b26"; }
229
- #converse-embedded-chat .icon-radio-unchecked:before,
230
- #conversejs .icon-radio-unchecked:before {
231
- content: "\2b25"; }
200
+ #converse-embedded-chat .icon-reddit:before,
201
+ #conversejs .icon-reddit:before {
202
+ content: "\eac6"; }
232
203
  #converse-embedded-chat .icon-remove:before,
233
204
  #conversejs .icon-remove:before {
234
- content: "\2715"; }
235
- #converse-embedded-chat .icon-trash:before,
236
- #conversejs .icon-trash:before {
237
205
  content: "\e02d"; }
238
206
  #converse-embedded-chat .icon-room-info:before,
239
207
  #conversejs .icon-room-info:before {
240
208
  content: "\e059"; }
241
- #converse-embedded-chat .icon-sad:before,
242
- #conversejs .icon-sad:before {
243
- content: "\2639"; }
244
209
  #converse-embedded-chat .icon-save:before,
245
210
  #conversejs .icon-save:before {
246
211
  content: "\f0c7"; }
247
212
  #converse-embedded-chat .icon-search:before,
248
213
  #conversejs .icon-search:before {
249
214
  content: "\e021"; }
250
- #converse-embedded-chat .icon-shocked:before,
251
- #conversejs .icon-shocked:before {
252
- content: "\2364"; }
253
215
  #converse-embedded-chat .icon-show-users:before,
254
216
  #conversejs .icon-show-users:before {
255
217
  content: "\e01e"; }
@@ -265,18 +227,19 @@
265
227
  #converse-embedded-chat .icon-spinner:before,
266
228
  #conversejs .icon-spinner:before {
267
229
  content: "\231b"; }
230
+ #converse-embedded-chat .icon-star:before,
231
+ #conversejs .icon-star:before {
232
+ content: "\f005"; }
233
+ #converse-embedded-chat .icon-star_empty:before,
234
+ #conversejs .icon-star_empty:before {
235
+ content: "\f006"; }
268
236
  #converse-embedded-chat .icon-strikethrough:before,
269
237
  #conversejs .icon-strikethrough:before {
270
238
  content: "\e050"; }
271
- #converse-embedded-chat .icon-thumbs-up:before,
272
- #conversejs .icon-thumbs-up:before {
273
- content: "\261d"; }
274
- #converse-embedded-chat .icon-tongue:before,
275
- #conversejs .icon-tongue:before {
276
- content: "\e038"; }
277
- #converse-embedded-chat .icon-unavailable:before,
239
+ #converse-embedded-chat .icon-twitter:before,
240
+ #conversejs .icon-twitter:before {
241
+ content: "\ea96"; }
278
242
  #converse-embedded-chat .icon-underline:before,
279
- #conversejs .icon-unavailable:before,
280
243
  #conversejs .icon-underline:before {
281
244
  content: "\e04e"; }
282
245
  #converse-embedded-chat .icon-unlocked:before,
@@ -291,26 +254,17 @@
291
254
  #converse-embedded-chat .icon-warning:before,
292
255
  #conversejs .icon-warning:before {
293
256
  content: "\26a0"; }
294
- #converse-embedded-chat .icon-wink:before,
295
- #conversejs .icon-wink:before {
296
- content: "\e03a"; }
297
- #converse-embedded-chat .icon-wondering:before,
298
- #conversejs .icon-wondering:before {
299
- content: "\2369"; }
300
257
  #converse-embedded-chat .icon-wrench:before,
301
258
  #conversejs .icon-wrench:before {
302
259
  content: "\e024"; }
303
260
  #converse-embedded-chat .icon-xa:before,
304
261
  #conversejs .icon-xa:before {
305
262
  content: "\e602"; }
306
- #converse-embedded-chat .icon-youtube:before,
307
- #conversejs .icon-youtube:before {
308
- content: "\e055"; }
309
- #converse-embedded-chat .icon-zoom-in:before,
310
- #conversejs .icon-zoom-in:before {
263
+ #converse-embedded-chat .icon-zoomin:before,
264
+ #conversejs .icon-zoomin:before {
311
265
  content: "\e02b"; }
312
- #converse-embedded-chat .icon-zoom-out:before,
313
- #conversejs .icon-zoom-out:before {
266
+ #converse-embedded-chat .icon-zoomout:before,
267
+ #conversejs .icon-zoomout:before {
314
268
  content: "\e02a"; }
315
269
  #converse-embedded-chat [data-icon]:before,
316
270
  #conversejs [data-icon]:before {
@@ -1044,7 +998,7 @@
1044
998
  padding: 0.5em 1em;
1045
999
  color: #444;
1046
1000
  /* rgba not supported (IE 8) */
1047
- color: rgba(0, 0, 0, 0.8);
1001
+ color: rgba(0, 0, 0, 0.6);
1048
1002
  /* rgba supported */
1049
1003
  border: 1px solid #999;
1050
1004
  /*IE 6/7/8*/
@@ -1145,6 +1099,8 @@
1145
1099
 
1146
1100
  #converse-embedded-chat,
1147
1101
  #conversejs {
1102
+ padding-left: env(safe-area-inset-left);
1103
+ padding-right: env(safe-area-inset-right);
1148
1104
  bottom: 0;
1149
1105
  color: #777;
1150
1106
  direction: ltr;
@@ -1201,6 +1157,50 @@
1201
1157
  -moz-user-select: none;
1202
1158
  -ms-user-select: none;
1203
1159
  user-select: none; }
1160
+ @keyframes colorchange-chatmessage {
1161
+ 0% {
1162
+ background-color: #8dd8ae; }
1163
+ 25% {
1164
+ background-color: rgba(141, 216, 174, 0.75); }
1165
+ 50% {
1166
+ background-color: rgba(141, 216, 174, 0.5); }
1167
+ 75% {
1168
+ background-color: rgba(141, 216, 174, 0.25); }
1169
+ 100% {
1170
+ background-color: transparent; } }
1171
+ @-webkit-keyframes colorchange-chatmessage {
1172
+ 0% {
1173
+ background-color: #8dd8ae; }
1174
+ 25% {
1175
+ background-color: rgba(141, 216, 174, 0.75); }
1176
+ 50% {
1177
+ background-color: rgba(141, 216, 174, 0.5); }
1178
+ 75% {
1179
+ background-color: rgba(141, 216, 174, 0.25); }
1180
+ 100% {
1181
+ background-color: transparent; } }
1182
+ @keyframes colorchange-chatmessage-muc {
1183
+ 0% {
1184
+ background-color: #ffb5a2; }
1185
+ 25% {
1186
+ background-color: rgba(255, 181, 162, 0.75); }
1187
+ 50% {
1188
+ background-color: rgba(255, 181, 162, 0.5); }
1189
+ 75% {
1190
+ background-color: rgba(255, 181, 162, 0.25); }
1191
+ 100% {
1192
+ background-color: transparent; } }
1193
+ @-webkit-keyframes colorchange-chatmessage-muc {
1194
+ 0% {
1195
+ background-color: #ffb5a2; }
1196
+ 25% {
1197
+ background-color: rgba(255, 181, 162, 0.75); }
1198
+ 50% {
1199
+ background-color: rgba(255, 181, 162, 0.5); }
1200
+ 75% {
1201
+ background-color: rgba(255, 181, 162, 0.25); }
1202
+ 100% {
1203
+ background-color: transparent; } }
1204
1204
  @keyframes fadein {
1205
1205
  0% {
1206
1206
  opacity: 0; }
@@ -1211,19 +1211,35 @@
1211
1211
  opacity: 0; }
1212
1212
  100% {
1213
1213
  opacity: 1; } }
1214
+ #converse-embedded-chat .fade-in,
1215
+ #conversejs .fade-in {
1216
+ opacity: 0;
1217
+ /* make things invisible upon start */
1218
+ -webkit-animation-name: fadein;
1219
+ -moz-animation-name: fadein;
1220
+ animation-name: fadein;
1221
+ -webkit-animation-fill-mode: forwards;
1222
+ -moz-animation-fill-mode: forwards;
1223
+ animation-fill-mode: forwards;
1224
+ -webkit-animation-duration: 0.75s;
1225
+ -moz-animation-duration: 0.75s;
1226
+ animation-duration: 0.75s;
1227
+ -webkit-animation-timing-function: ease;
1228
+ -moz-animation-timing-function: ease;
1229
+ animation-timing-function: ease; }
1214
1230
  #converse-embedded-chat .visible,
1215
1231
  #conversejs .visible {
1216
- visibility: visible;
1217
- opacity: 1;
1232
+ opacity: 0;
1233
+ /* make things invisible upon start */
1218
1234
  -webkit-animation-name: fadein;
1219
1235
  -moz-animation-name: fadein;
1220
1236
  animation-name: fadein;
1221
1237
  -webkit-animation-fill-mode: forwards;
1222
1238
  -moz-animation-fill-mode: forwards;
1223
1239
  animation-fill-mode: forwards;
1224
- -webkit-animation-duration: 350ms;
1225
- -moz-animation-duration: 350ms;
1226
- animation-duration: 350ms;
1240
+ -webkit-animation-duration: 500ms;
1241
+ -moz-animation-duration: 500ms;
1242
+ animation-duration: 500ms;
1227
1243
  -webkit-animation-timing-function: ease;
1228
1244
  -moz-animation-timing-function: ease;
1229
1245
  animation-timing-function: ease; }
@@ -1233,8 +1249,9 @@
1233
1249
  display: none; }
1234
1250
  #converse-embedded-chat .collapsed,
1235
1251
  #conversejs .collapsed {
1236
- height: 0;
1237
- overflow: hidden; }
1252
+ height: 0 !important;
1253
+ overflow: hidden !important;
1254
+ padding: 0 !important; }
1238
1255
  #converse-embedded-chat .locked,
1239
1256
  #conversejs .locked {
1240
1257
  padding-right: 22px; }
@@ -1311,9 +1328,13 @@
1311
1328
  #converse-embedded-chat .error,
1312
1329
  #conversejs .error {
1313
1330
  color: #A53214; }
1331
+ #converse-embedded-chat .info,
1332
+ #conversejs .info {
1333
+ color: #1E9652; }
1314
1334
  #converse-embedded-chat .reg-feedback,
1315
1335
  #conversejs .reg-feedback {
1316
- font-size: 85%; }
1336
+ font-size: 85%;
1337
+ margin-bottom: 1em; }
1317
1338
  #converse-embedded-chat .reg-feedback,
1318
1339
  #converse-embedded-chat #converse-login .conn-feedback,
1319
1340
  #conversejs .reg-feedback,
@@ -1341,7 +1362,7 @@
1341
1362
  padding: 0.5em 0; }
1342
1363
  #converse-embedded-chat .pure-button,
1343
1364
  #conversejs .pure-button {
1344
- border-radius: 4px; }
1365
+ border-radius: 5px; }
1345
1366
  #converse-embedded-chat .button-primary,
1346
1367
  #conversejs .button-primary {
1347
1368
  color: white;
@@ -1360,10 +1381,24 @@
1360
1381
  padding: 1em; }
1361
1382
  #converse-embedded-chat form.pure-form.converse-form legend,
1362
1383
  #conversejs form.pure-form.converse-form legend {
1363
- color: #777; }
1384
+ color: #777;
1385
+ font-size: 125%;
1386
+ margin-bottom: 1.5em; }
1387
+ #converse-embedded-chat form.pure-form.converse-form input[type=checkbox],
1388
+ #conversejs form.pure-form.converse-form input[type=checkbox] {
1389
+ display: block; }
1390
+ #converse-embedded-chat form.pure-form.converse-form select,
1391
+ #converse-embedded-chat form.pure-form.converse-form input[type=password],
1392
+ #converse-embedded-chat form.pure-form.converse-form input[type=number],
1393
+ #converse-embedded-chat form.pure-form.converse-form input[type=text],
1394
+ #conversejs form.pure-form.converse-form select,
1395
+ #conversejs form.pure-form.converse-form input[type=password],
1396
+ #conversejs form.pure-form.converse-form input[type=number],
1397
+ #conversejs form.pure-form.converse-form input[type=text] {
1398
+ min-width: 50%; }
1364
1399
  #converse-embedded-chat form.pure-form.converse-form label,
1365
1400
  #conversejs form.pure-form.converse-form label {
1366
- margin-top: 1em;
1401
+ margin: 1em 0;
1367
1402
  font-size: 16px; }
1368
1403
  #converse-embedded-chat form.pure-form.converse-form input[type=text],
1369
1404
  #converse-embedded-chat form.pure-form.converse-form input[type=password],
@@ -1396,6 +1431,9 @@
1396
1431
  #converse-embedded-chat form.pure-form.converse-form .form-help:hover,
1397
1432
  #conversejs form.pure-form.converse-form .form-help:hover {
1398
1433
  color: #777; }
1434
+ #converse-embedded-chat form.pure-form.converse-form .form-help.error,
1435
+ #conversejs form.pure-form.converse-form .form-help.error {
1436
+ color: #A53214; }
1399
1437
  #converse-embedded-chat form.pure-form.converse-centered-form,
1400
1438
  #conversejs form.pure-form.converse-centered-form {
1401
1439
  text-align: center;
@@ -1448,7 +1486,7 @@
1448
1486
  #converse-embedded-chat .chat-head .avatar,
1449
1487
  #conversejs .chat-head .avatar {
1450
1488
  margin-right: 0.5em;
1451
- border-radius: 50%;
1489
+ border-radius: 25%;
1452
1490
  float: left; }
1453
1491
  #converse-embedded-chat .chat-head.chat-head-chatbox,
1454
1492
  #conversejs .chat-head.chat-head-chatbox {
@@ -1501,6 +1539,9 @@
1501
1539
  #conversejs .chatbox {
1502
1540
  margin: 0;
1503
1541
  width: 100%; } }
1542
+ #converse-embedded-chat .chatbox .spoiler,
1543
+ #conversejs .chatbox .spoiler {
1544
+ background-color: #e7f7ee; }
1504
1545
  #converse-embedded-chat .chatbox .box-flyout,
1505
1546
  #conversejs .chatbox .box-flyout {
1506
1547
  background-color: white;
@@ -1579,6 +1620,8 @@
1579
1620
  margin-top: 1em; }
1580
1621
  #converse-embedded-chat .chatbox .chat-body .chat-image,
1581
1622
  #conversejs .chatbox .chat-body .chat-image {
1623
+ height: auto;
1624
+ width: auto;
1582
1625
  max-height: 24em;
1583
1626
  max-width: 100%; }
1584
1627
  #converse-embedded-chat .chatbox .chat-body .chat-action,
@@ -1587,6 +1630,10 @@
1587
1630
  #converse-embedded-chat .chatbox .chat-body .chat-message,
1588
1631
  #conversejs .chatbox .chat-body .chat-message {
1589
1632
  overflow: auto; }
1633
+ #converse-embedded-chat .chatbox .chat-body .chat-message.onload,
1634
+ #conversejs .chatbox .chat-body .chat-message.onload {
1635
+ animation: colorchange-chatmessage 1s;
1636
+ -webkit-animation: colorchange-chatmessage 1s; }
1590
1637
  #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author,
1591
1638
  #conversejs .chatbox .chat-body .chat-message .chat-msg-author {
1592
1639
  font-weight: bold;
@@ -1596,7 +1643,7 @@
1596
1643
  overflow: hidden; }
1597
1644
  #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-them,
1598
1645
  #conversejs .chatbox .chat-body .chat-message .chat-msg-them {
1599
- color: #E77051; }
1646
+ color: #3AA569; }
1600
1647
  #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-me,
1601
1648
  #conversejs .chatbox .chat-body .chat-message .chat-msg-me {
1602
1649
  color: #578EA9; }
@@ -1604,15 +1651,19 @@
1604
1651
  #conversejs .chatbox .chat-body .chat-message .chat-msg-content {
1605
1652
  max-width: 100%;
1606
1653
  word-wrap: break-word; }
1654
+ #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content.spoiler,
1655
+ #conversejs .chatbox .chat-body .chat-message .chat-msg-content.spoiler {
1656
+ border-radius: 4px;
1657
+ padding: 0.5em; }
1607
1658
  #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content .emojione,
1608
1659
  #conversejs .chatbox .chat-body .chat-message .chat-msg-content .emojione {
1609
1660
  margin-bottom: -6px; }
1610
1661
  #converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-them,
1611
1662
  #conversejs .chatbox .chat-body .delayed .chat-msg-them {
1612
- color: #FB5D50; }
1663
+ color: #41b875; }
1613
1664
  #converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-me,
1614
1665
  #conversejs .chatbox .chat-body .delayed .chat-msg-me {
1615
- color: #7EABBB; }
1666
+ color: #6899b2; }
1616
1667
  #converse-embedded-chat .chatbox .new-msgs-indicator,
1617
1668
  #conversejs .chatbox .new-msgs-indicator {
1618
1669
  position: absolute;
@@ -1637,6 +1688,10 @@
1637
1688
  line-height: 1.3em;
1638
1689
  height: 206px;
1639
1690
  height: calc(100% - 96px); }
1691
+ #converse-embedded-chat .chatbox .chat-content .toggle-spoiler:before,
1692
+ #conversejs .chatbox .chat-content .toggle-spoiler:before {
1693
+ padding-right: 0.25em;
1694
+ whitespace: nowrap; }
1640
1695
  #converse-embedded-chat .chatbox .chat-content-sendbutton,
1641
1696
  #conversejs .chatbox .chat-content-sendbutton {
1642
1697
  height: calc(100% - 128px); }
@@ -1649,8 +1704,8 @@
1649
1704
  margin: 0;
1650
1705
  padding: 0;
1651
1706
  position: relative; }
1652
- #converse-embedded-chat .chatbox form.sendXMPPMessage,
1653
- #conversejs .chatbox form.sendXMPPMessage {
1707
+ #converse-embedded-chat .chatbox .sendXMPPMessage,
1708
+ #conversejs .chatbox .sendXMPPMessage {
1654
1709
  -moz-background-clip: padding;
1655
1710
  -webkit-background-clip: padding-box;
1656
1711
  border-bottom-left-radius: 4px;
@@ -1664,15 +1719,18 @@
1664
1719
  height: 95px;
1665
1720
  min-width: 200px; }
1666
1721
  @media screen and (max-height: 450px) {
1667
- #converse-embedded-chat .chatbox form.sendXMPPMessage,
1668
- #conversejs .chatbox form.sendXMPPMessage {
1722
+ #converse-embedded-chat .chatbox .sendXMPPMessage,
1723
+ #conversejs .chatbox .sendXMPPMessage {
1669
1724
  width: 100%; } }
1670
1725
  @media screen and (max-width: 480px) {
1671
- #converse-embedded-chat .chatbox form.sendXMPPMessage,
1672
- #conversejs .chatbox form.sendXMPPMessage {
1726
+ #converse-embedded-chat .chatbox .sendXMPPMessage,
1727
+ #conversejs .chatbox .sendXMPPMessage {
1673
1728
  width: 100%; } }
1674
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea,
1675
- #conversejs .chatbox form.sendXMPPMessage .chat-textarea {
1729
+ #converse-embedded-chat .chatbox .sendXMPPMessage .spoiler-hint,
1730
+ #conversejs .chatbox .sendXMPPMessage .spoiler-hint {
1731
+ width: 100%; }
1732
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-textarea,
1733
+ #conversejs .chatbox .sendXMPPMessage .chat-textarea {
1676
1734
  border-bottom-left-radius: 4px;
1677
1735
  border-bottom-right-radius: 4px;
1678
1736
  border: 0;
@@ -1680,8 +1738,11 @@
1680
1738
  padding: 0.5em;
1681
1739
  width: 100%;
1682
1740
  resize: none; }
1683
- #converse-embedded-chat .chatbox form.sendXMPPMessage .send-button,
1684
- #conversejs .chatbox form.sendXMPPMessage .send-button {
1741
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-textarea.spoiler,
1742
+ #conversejs .chatbox .sendXMPPMessage .chat-textarea.spoiler {
1743
+ height: 42px; }
1744
+ #converse-embedded-chat .chatbox .sendXMPPMessage .send-button,
1745
+ #conversejs .chatbox .sendXMPPMessage .send-button {
1685
1746
  position: absolute;
1686
1747
  left: 3px;
1687
1748
  width: -webkit-calc(100% - 6px);
@@ -1691,63 +1752,60 @@
1691
1752
  font-size: 80%;
1692
1753
  height: 27px;
1693
1754
  bottom: -30px; }
1694
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar,
1695
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar {
1755
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar,
1756
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar {
1696
1757
  box-sizing: border-box;
1697
1758
  margin: 0;
1698
- padding: 5px;
1759
+ padding: 0.25em;
1699
1760
  height: 25px;
1700
1761
  display: block;
1701
- background-color: #E7FBF0; }
1702
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar a,
1703
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar a {
1704
- font-size: 14px;
1705
- color: #777;
1762
+ background-color: #50c282;
1763
+ color: white; }
1764
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar a,
1765
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar a {
1766
+ color: white;
1767
+ font-size: 16px;
1706
1768
  text-decoration: none;
1707
1769
  text-shadow: none; }
1708
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text,
1709
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text {
1710
- font-size: 12px;
1711
- padding-right: 3px; }
1712
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
1713
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted,
1714
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
1715
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted {
1770
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
1771
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted,
1772
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
1773
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted {
1716
1774
  color: #777; }
1717
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
1718
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a,
1719
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
1720
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a {
1775
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
1776
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a,
1777
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
1778
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a {
1721
1779
  color: #578EA9; }
1722
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
1723
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified,
1724
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
1725
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified {
1780
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unverified a,
1781
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unverified,
1782
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unverified a,
1783
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unverified {
1726
1784
  color: #cf5300; }
1727
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .private a,
1728
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .private,
1729
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .private a,
1730
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .private {
1785
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .private a,
1786
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .private,
1787
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar .private a,
1788
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar .private {
1731
1789
  color: #4b7003; }
1732
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-occupants,
1733
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-clear,
1734
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr,
1735
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-occupants,
1736
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-clear,
1737
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr {
1790
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants,
1791
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-clear,
1792
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-otr,
1793
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants,
1794
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-clear,
1795
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-otr {
1738
1796
  float: right; }
1739
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li,
1740
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li {
1797
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li,
1798
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar li {
1741
1799
  cursor: pointer;
1742
1800
  display: inline-block;
1743
1801
  list-style: none;
1744
1802
  margin-top: 1px;
1745
1803
  padding: 0 3px 0 3px; }
1746
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li:hover,
1747
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li:hover {
1804
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li:hover,
1805
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar li:hover {
1748
1806
  cursor: pointer; }
1749
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu,
1750
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu {
1807
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu,
1808
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu {
1751
1809
  background-color: #fff;
1752
1810
  bottom: 100%;
1753
1811
  box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
@@ -1755,71 +1813,68 @@
1755
1813
  margin: 0;
1756
1814
  position: absolute;
1757
1815
  right: 0; }
1758
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a,
1759
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a {
1816
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a,
1817
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a {
1760
1818
  color: #578EA9; }
1761
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker,
1762
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
1819
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker,
1820
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
1763
1821
  height: 100px;
1764
1822
  overflow: scroll;
1765
1823
  padding: 0.5em; }
1766
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
1767
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
1824
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
1825
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
1768
1826
  /* offset-x | offset-y | blur-radius | spread-radius | color */
1769
1827
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4); }
1770
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
1771
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
1828
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
1829
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
1772
1830
  overflow: hidden;
1773
1831
  left: 0; }
1774
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked,
1775
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked {
1832
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked,
1833
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked {
1776
1834
  background-color: #DCF9F6; }
1777
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li,
1778
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li {
1835
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li,
1836
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li {
1779
1837
  height: 30px;
1780
1838
  padding: 4px;
1781
1839
  z-index: 98; }
1782
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a,
1783
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a {
1840
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a,
1841
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a {
1784
1842
  font-size: 20px; }
1785
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
1786
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
1843
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
1844
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
1787
1845
  margin-left: 0;
1788
1846
  cursor: pointer;
1789
1847
  list-style: none;
1790
1848
  position: relative; }
1791
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji,
1792
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji {
1849
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji,
1850
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji {
1793
1851
  padding: 0.3em; }
1794
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover,
1795
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover {
1852
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover,
1853
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover {
1796
1854
  background-color: #DCF9F6; }
1797
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
1798
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
1855
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
1856
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
1799
1857
  color: #8f2831; }
1800
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu,
1801
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
1802
- color: #777; }
1803
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley,
1804
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley {
1805
- padding-left: 5px; }
1806
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
1807
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
1808
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
1809
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
1810
- background-color: #DCF9F6; }
1811
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul,
1812
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul {
1858
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu,
1859
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
1860
+ color: white; }
1861
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
1862
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
1863
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
1864
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
1865
+ background-color: #DCF9F6; }
1866
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul,
1867
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul {
1813
1868
  z-index: 99; }
1814
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li,
1815
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li {
1869
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li,
1870
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li {
1816
1871
  display: block;
1817
1872
  padding: 7px; }
1818
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover,
1819
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover {
1873
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover,
1874
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover {
1820
1875
  background-color: #DCF9F6; }
1821
- #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a,
1822
- #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a {
1876
+ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li a,
1877
+ #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li a {
1823
1878
  display: block; }
1824
1879
  #converse-embedded-chat .chatbox .dragresize,
1825
1880
  #conversejs .chatbox .dragresize {
@@ -1864,7 +1919,7 @@
1864
1919
  border-top-right-radius: 0; } }
1865
1920
  #converse-embedded-chat .chatbox .chat-body .chat-message,
1866
1921
  #conversejs .chatbox .chat-body .chat-message {
1867
- margin: 0.3em;
1922
+ padding: 0.3em;
1868
1923
  line-height: 20px; }
1869
1924
  #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author,
1870
1925
  #conversejs .chatbox .chat-body .chat-message .chat-msg-author {
@@ -1914,6 +1969,9 @@
1914
1969
  #conversejs #controlbox .controlbox-head {
1915
1970
  border-top-left-radius: 0;
1916
1971
  border-top-right-radius: 0; } }
1972
+ #conversejs #controlbox.logged-out .box-flyout .controlbox-pane {
1973
+ position: relative;
1974
+ overflow-y: auto; }
1917
1975
  #conversejs #controlbox form.search-xmpp-contact {
1918
1976
  margin: 0;
1919
1977
  padding-left: 5px;
@@ -1932,22 +1990,38 @@
1932
1990
  padding-left: 2em;
1933
1991
  font-weight: bold; }
1934
1992
  #conversejs #controlbox #converse-register {
1993
+ opacity: 0;
1994
+ /* make things invisible upon start */
1995
+ -webkit-animation-name: fadein;
1996
+ -moz-animation-name: fadein;
1997
+ animation-name: fadein;
1998
+ -webkit-animation-fill-mode: forwards;
1999
+ -moz-animation-fill-mode: forwards;
2000
+ animation-fill-mode: forwards;
2001
+ -webkit-animation-duration: 0.75s;
2002
+ -moz-animation-duration: 0.75s;
2003
+ animation-duration: 0.75s;
2004
+ -webkit-animation-timing-function: ease;
2005
+ -moz-animation-timing-function: ease;
2006
+ animation-timing-function: ease;
1935
2007
  background: white; }
1936
2008
  #conversejs #controlbox #converse-register .title {
1937
2009
  font-weight: bold; }
1938
2010
  #conversejs #controlbox #converse-register .info {
1939
- font-style: italic;
1940
2011
  color: green;
1941
- font-size: 85%;
1942
- margin: 5px 0; }
2012
+ font-size: 90%;
2013
+ margin: 1.5em 0; }
1943
2014
  #conversejs #controlbox #converse-register .form-errors {
1944
- color: red;
1945
- display: none; }
2015
+ color: #A53214;
2016
+ margin: 1em 0; }
1946
2017
  #conversejs #controlbox #converse-register .provider-title {
1947
- font-size: 22px; }
2018
+ font-size: 20px;
2019
+ margin: 0; }
1948
2020
  #conversejs #controlbox #converse-register .provider-score {
1949
2021
  width: 178px;
1950
2022
  margin-bottom: 8px; }
2023
+ #conversejs #controlbox #converse-register .title, #conversejs #controlbox #converse-register .instructions, #conversejs #controlbox #converse-register label {
2024
+ margin: 0.5em 0 0 0; }
1951
2025
  #conversejs #controlbox #converse-register .form-help .url {
1952
2026
  font-weight: bold;
1953
2027
  color: #578EA9; }
@@ -1967,16 +2041,38 @@
1967
2041
  font-size: 85%; }
1968
2042
  #conversejs #controlbox #converse-register .instructions:hover {
1969
2043
  color: #777; }
1970
- #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
1971
- margin-top: 2em; }
1972
- #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
1973
- height: auto;
1974
- white-space: normal; }
1975
- #conversejs #controlbox #converse-register .save-submit, #conversejs #controlbox #converse-login .save-submit {
1976
- color: #3AA569; }
1977
- #conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
1978
- width: 100%;
1979
- margin: 0.5em 0; }
2044
+ #conversejs #controlbox .conn-feedback {
2045
+ color: #578EA9; }
2046
+ #conversejs #controlbox .conn-feedback.error {
2047
+ color: #A53214; }
2048
+ #conversejs #controlbox .conn-feedback p {
2049
+ padding-bottom: 0.5em; }
2050
+ #conversejs #controlbox .conn-feedback p.feedback-subject.error {
2051
+ font-weight: bold; }
2052
+ #conversejs #controlbox .brand-heading-container .brand-heading {
2053
+ text-align: left;
2054
+ font-size: 150%; }
2055
+ #conversejs #controlbox .brand-heading-container .brand-name {
2056
+ font-size: 120%; }
2057
+ #conversejs #controlbox .toggle-register-login {
2058
+ font-weight: bold; }
2059
+ #conversejs #controlbox .oauth-login {
2060
+ margin-left: 0;
2061
+ color: #777; }
2062
+ #conversejs #controlbox .oauth-login .icon-social:before {
2063
+ font-size: 16px; }
2064
+ #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
2065
+ height: auto;
2066
+ white-space: normal; }
2067
+ #conversejs #controlbox #converse-register .save-submit, #conversejs #controlbox #converse-login .save-submit {
2068
+ color: #3AA569; }
2069
+ #conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
2070
+ width: 100%;
2071
+ margin: 1em 0; }
2072
+ #conversejs #controlbox #converse-register .form-url, #conversejs #controlbox #converse-login .form-url {
2073
+ display: block;
2074
+ font-weight: normal;
2075
+ margin: 1em 0; }
1980
2076
  #conversejs #controlbox #users .add-converse-contact {
1981
2077
  margin: 0 0 0.75em 0; }
1982
2078
  #conversejs #controlbox #chatrooms form.add-chatroom {
@@ -2004,7 +2100,8 @@
2004
2100
  font-weight: normal;
2005
2101
  padding: 0;
2006
2102
  padding-bottom: 0.5em;
2007
- text-shadow: 0 1px 0 #FAFAFA; }
2103
+ text-shadow: 0 1px 0 #FAFAFA;
2104
+ word-wrap: break-word; }
2008
2105
  #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom,
2009
2106
  #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom {
2010
2107
  border: none;
@@ -2198,16 +2295,24 @@
2198
2295
  width: 40px;
2199
2296
  padding: 1px;
2200
2297
  float: right; }
2298
+ #conversejs #controlbox .controlbox-panes {
2299
+ height: 100%;
2300
+ overflow-y: auto; }
2201
2301
  #conversejs #controlbox .controlbox-pane {
2202
2302
  padding: 1em;
2203
2303
  background-color: white;
2204
2304
  border: 0;
2205
2305
  font-size: 14px;
2206
2306
  position: absolute;
2307
+ left: 0;
2207
2308
  text-align: center;
2208
2309
  width: 100%;
2209
2310
  overflow-y: auto;
2210
2311
  overflow-x: hidden; }
2312
+ #conversejs #controlbox .controlbox-pane .switch-form {
2313
+ padding-bottom: 2em; }
2314
+ #conversejs #controlbox .controlbox-pane .switch-form p {
2315
+ margin-top: 0.5em; }
2211
2316
  #conversejs #controlbox .controlbox-pane label {
2212
2317
  font-size: 14px;
2213
2318
  font-weight: bold;
@@ -2230,6 +2335,8 @@
2230
2335
  #conversejs #controlbox .xmpp-status-menu {
2231
2336
  text-align: left;
2232
2337
  box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4); }
2338
+ #conversejs #controlbox .xmpp-status-menu.collapsed {
2339
+ box-shadow: none; }
2233
2340
  #conversejs #controlbox .xmpp-status-menu li {
2234
2341
  padding: 2px; }
2235
2342
  #conversejs #controlbox .xmpp-status-menu li a {
@@ -2255,12 +2362,16 @@
2255
2362
  #conversejs .toggle-controlbox span {
2256
2363
  color: white; }
2257
2364
 
2365
+ #conversejs #controlbox #converse-register .button-cancel {
2366
+ font-size: 90%; }
2258
2367
  #conversejs #controlbox .controlbox-pane {
2259
2368
  border-bottom-left-radius: 4px;
2260
2369
  border-bottom-right-radius: 4px;
2261
2370
  height: 289px;
2262
2371
  height: -webkit-calc(100% - 55px);
2263
2372
  height: calc(100% - 55px); }
2373
+ #conversejs #controlbox .brand-heading-container .brand-heading {
2374
+ margin-left: 1em; }
2264
2375
 
2265
2376
  #conversejs #controlbox .available-chatroom.unread-msgs .msgs-indicator {
2266
2377
  border-radius: 10%;
@@ -2330,101 +2441,101 @@
2330
2441
  margin: 0;
2331
2442
  height: 100%;
2332
2443
  overflow-x: hidden;
2333
- overflow-y: auto;
2334
- display: none; }
2335
- #conversejs #converse-roster .roster-contacts dt.roster-group {
2444
+ overflow-y: auto; }
2445
+ #conversejs #converse-roster .roster-contacts .roster-group {
2336
2446
  border: none;
2337
2447
  color: #777;
2338
- display: none;
2339
2448
  font-weight: normal;
2340
- margin: 1em 0 0.5em 0;
2341
2449
  text-shadow: 0 1px 0 #FAFAFA; }
2342
- #conversejs #converse-roster .roster-contacts dt.roster-group .group-toggle {
2450
+ #conversejs #converse-roster .roster-contacts .roster-group .group-toggle {
2343
2451
  color: #777;
2344
2452
  display: block;
2345
- width: 100%; }
2346
- #conversejs #converse-roster .roster-contacts dt.roster-group .group-toggle:hover {
2453
+ width: 100%;
2454
+ margin: 0.5em 0; }
2455
+ #conversejs #converse-roster .roster-contacts .roster-group .group-toggle:hover {
2347
2456
  color: #585B51; }
2348
- #conversejs #converse-roster .roster-contacts dd {
2349
- border: none;
2350
- clear: both;
2351
- color: #777;
2352
- display: block;
2353
- height: 24px;
2354
- overflow-y: hidden;
2355
- text-shadow: 0 1px 0 #FAFAFA;
2356
- line-height: 14px;
2357
- width: 100%;
2358
- height: 30px;
2359
- margin: 0;
2360
- padding: 0.5em 0 0 0; }
2361
- #conversejs #converse-roster .roster-contacts dd a:hover {
2362
- color: #206485; }
2363
- #conversejs #converse-roster .roster-contacts dd .open-chat {
2364
- margin: auto;
2365
- padding: 0;
2366
- width: 85%; }
2367
- #conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs {
2368
- font-weight: bold; }
2369
- #conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .contact-name {
2370
- width: 70%; }
2371
- #conversejs #converse-roster .roster-contacts dd .open-chat .msgs-indicator {
2372
- background-color: #3AA569;
2373
- opacity: 1;
2374
- border-radius: 10%;
2375
- padding: 0 0.2em;
2376
- font-size: 12px; }
2377
- #conversejs #converse-roster .roster-contacts dd .open-chat .contact-name {
2457
+ #conversejs #converse-roster .roster-contacts .roster-group li {
2458
+ border: none;
2459
+ clear: both;
2460
+ color: #777;
2461
+ display: block;
2462
+ height: 24px;
2463
+ overflow-y: hidden;
2464
+ text-shadow: 0 1px 0 #FAFAFA;
2465
+ line-height: 14px;
2466
+ width: 100%;
2467
+ height: 30px;
2468
+ margin: 0;
2469
+ padding: 0.5em 0 0 0; }
2470
+ #conversejs #converse-roster .roster-contacts .roster-group li a:hover {
2471
+ color: #206485; }
2472
+ #conversejs #converse-roster .roster-contacts .roster-group li .open-chat {
2473
+ margin: auto;
2474
+ padding: 0;
2475
+ width: 85%; }
2476
+ #conversejs #converse-roster .roster-contacts .roster-group li .open-chat.unread-msgs {
2477
+ font-weight: bold; }
2478
+ #conversejs #converse-roster .roster-contacts .roster-group li .open-chat.unread-msgs .contact-name {
2479
+ width: 70%; }
2480
+ #conversejs #converse-roster .roster-contacts .roster-group li .open-chat .msgs-indicator {
2481
+ background-color: #3AA569;
2482
+ opacity: 1;
2483
+ border-radius: 10%;
2484
+ padding: 0 0.2em;
2485
+ font-size: 12px; }
2486
+ #conversejs #converse-roster .roster-contacts .roster-group li .open-chat .contact-name {
2487
+ overflow: hidden;
2488
+ white-space: nowrap;
2489
+ text-overflow: ellipsis;
2490
+ padding: 0;
2491
+ margin: 0;
2492
+ max-width: 80%;
2493
+ float: none;
2494
+ height: 60px; }
2495
+ #conversejs #converse-roster .roster-contacts .roster-group li .open-chat .contact-name.unread-msgs {
2496
+ max-width: 60%; }
2497
+ #conversejs #converse-roster .roster-contacts .roster-group li .open-chat .avatar {
2498
+ float: left;
2499
+ display: inline-block;
2500
+ height: 60px; }
2501
+ #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .request-actions {
2502
+ padding: 0 0 0 0.3em;
2503
+ float: right; }
2504
+ #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .open-chat {
2505
+ max-width: 70%; }
2506
+ #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .open-chat .req-contact-name {
2507
+ width: 100%; }
2508
+ #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .req-contact-name {
2509
+ line-height: 16px;
2510
+ width: 69%;
2511
+ padding: 0; }
2512
+ #conversejs #converse-roster .roster-contacts .roster-group li.current-xmpp-contact span {
2513
+ font-size: 14px;
2514
+ float: left;
2515
+ margin-right: 0.5em; }
2516
+ #conversejs #converse-roster .roster-contacts .roster-group li.odd {
2517
+ background-color: #DCEAC5;
2518
+ /* Make this difference */ }
2519
+ #conversejs #converse-roster .roster-contacts .roster-group li a, #conversejs #converse-roster .roster-contacts .roster-group li span {
2520
+ display: inline-block;
2378
2521
  overflow: hidden;
2379
2522
  white-space: nowrap;
2380
- text-overflow: ellipsis;
2523
+ text-overflow: ellipsis; }
2524
+ #conversejs #converse-roster .roster-contacts .roster-group li span {
2381
2525
  padding: 0;
2526
+ height: 100%; }
2527
+ #conversejs #converse-roster .roster-contacts .roster-group li a.decline-xmpp-request {
2528
+ margin-left: 5px; }
2529
+ #conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact {
2530
+ font-size: 10px;
2531
+ float: right;
2382
2532
  margin: 0;
2383
- max-width: 80%;
2384
- float: none;
2385
- height: 60px; }
2386
- #conversejs #converse-roster .roster-contacts dd .open-chat .contact-name.unread-msgs {
2387
- max-width: 60%; }
2388
- #conversejs #converse-roster .roster-contacts dd .open-chat .avatar {
2389
- float: left;
2390
- display: inline-block;
2391
- height: 60px; }
2392
- #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .request-actions {
2393
- padding: 0 0 0 0.3em;
2394
- float: right; }
2395
- #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .open-chat {
2396
- max-width: 70%; }
2397
- #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .open-chat .req-contact-name {
2398
- width: 100%; }
2399
- #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .req-contact-name {
2400
- line-height: 16px;
2401
- width: 69%;
2402
- padding: 0; }
2403
- #conversejs #converse-roster .roster-contacts dd.current-xmpp-contact span {
2404
- font-size: 14px;
2405
- float: left;
2406
- margin-right: 0.5em; }
2407
- #conversejs #converse-roster .roster-contacts dd.odd {
2408
- background-color: #DCEAC5;
2409
- /* Make this difference */ }
2410
- #conversejs #converse-roster .roster-contacts dd a, #conversejs #converse-roster .roster-contacts dd span {
2411
- display: inline-block;
2412
- overflow: hidden;
2413
- white-space: nowrap;
2414
- text-overflow: ellipsis; }
2415
- #conversejs #converse-roster .roster-contacts dd span {
2416
- padding: 0;
2417
- height: 100%; }
2418
- #conversejs #converse-roster .roster-contacts dd a.decline-xmpp-request {
2419
- margin-left: 5px; }
2420
- #conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact {
2421
- font-size: 10px;
2422
- float: right;
2423
- margin: 0;
2424
- padding: 0;
2425
- color: #A8ABA1; }
2426
- #conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact:hover {
2427
- color: #818479; }
2533
+ padding: 0;
2534
+ color: #A8ABA1; }
2535
+ #conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:before {
2536
+ font-size: 14px; }
2537
+ #conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:hover {
2538
+ color: #818479; }
2428
2539
  #conversejs #converse-roster span.pending-contact-name {
2429
2540
  line-height: 16px;
2430
2541
  width: 100%; }
@@ -2505,6 +2616,10 @@
2505
2616
  #converse-embedded-chat .chatroom .box-flyout .chatroom-body .mentioned,
2506
2617
  #conversejs .chatroom .box-flyout .chatroom-body .mentioned {
2507
2618
  font-weight: bold; }
2619
+ #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message.onload,
2620
+ #conversejs .chatroom .box-flyout .chatroom-body .chat-message.onload {
2621
+ animation: colorchange-chatmessage-muc 1s;
2622
+ -webkit-animation: colorchange-chatmessage-muc 1s; }
2508
2623
  #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them,
2509
2624
  #conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them {
2510
2625
  color: #3AA569; }
@@ -2549,11 +2664,8 @@
2549
2664
  font-weight: bold; }
2550
2665
  #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
2551
2666
  #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
2552
- position: absolute;
2553
2667
  bottom: 0.5em;
2554
- width: 25%;
2555
- width: -webkit-calc(30% - 1em);
2556
- width: calc(30% - 1em); }
2668
+ width: 100%; }
2557
2669
  #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul,
2558
2670
  #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul {
2559
2671
  padding: 0; }
@@ -2562,7 +2674,8 @@
2562
2674
  padding: .5em; }
2563
2675
  #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul,
2564
2676
  #conversejs .chatroom .box-flyout .chatroom-body .occupants ul {
2565
- padding: 0.3em 0;
2677
+ padding: 0.5em 0 0 0;
2678
+ margin-bottom: 0.5em;
2566
2679
  overflow-x: hidden;
2567
2680
  overflow-y: auto;
2568
2681
  list-style: none; }
@@ -2615,6 +2728,9 @@
2615
2728
  #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.moderator,
2616
2729
  #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.moderator {
2617
2730
  color: #D24E2B; }
2731
+ #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.visitor,
2732
+ #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.visitor {
2733
+ color: #A8ABA1; }
2618
2734
  #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container,
2619
2735
  #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container {
2620
2736
  background-color: white;
@@ -2646,14 +2762,14 @@
2646
2762
  #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary,
2647
2763
  #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary {
2648
2764
  background-color: #E77051; }
2649
- #converse-embedded-chat .chatroom form.sendXMPPMessage .chat-toolbar,
2650
- #conversejs .chatroom form.sendXMPPMessage .chat-toolbar {
2651
- background-color: #FFECE7; }
2652
- #converse-embedded-chat .chatroom form.sendXMPPMessage .chat-textarea,
2653
- #conversejs .chatroom form.sendXMPPMessage .chat-textarea {
2765
+ #converse-embedded-chat .chatroom .sendXMPPMessage .chat-toolbar,
2766
+ #conversejs .chatroom .sendXMPPMessage .chat-toolbar {
2767
+ background-color: #ed957e; }
2768
+ #converse-embedded-chat .chatroom .sendXMPPMessage .chat-textarea,
2769
+ #conversejs .chatroom .sendXMPPMessage .chat-textarea {
2654
2770
  border-bottom-right-radius: 0; }
2655
- #converse-embedded-chat .chatroom form.sendXMPPMessage .send-button,
2656
- #conversejs .chatroom form.sendXMPPMessage .send-button {
2771
+ #converse-embedded-chat .chatroom .sendXMPPMessage .send-button,
2772
+ #conversejs .chatroom .sendXMPPMessage .send-button {
2657
2773
  background-color: #E77051; }
2658
2774
  #converse-embedded-chat .chatroom .room-invite .invited-contact,
2659
2775
  #conversejs .chatroom .room-invite .invited-contact {