vue-intergrall-plugins 1.0.2 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/vue-intergrall-plugins.css +1655 -1658
  2. package/dist/vue-intergrall-plugins.esm.js +3272 -2498
  3. package/dist/vue-intergrall-plugins.min.js +1 -1
  4. package/dist/vue-intergrall-plugins.ssr.js +3261 -2612
  5. package/package.json +2 -2
package/dist/vue-intergrall-plugins.css CHANGED
@@ -1,595 +1,349 @@
1
1
 
2
- .btn-red button {
3
- background-color: red;
4
- }
5
-
6
- .btn-red svg {
7
- color: rgb(182, 0, 0);
8
- }
9
-
10
- .container-btns {
11
- display: flex;
12
- flex-direction: column;
13
- justify-content: center;
14
- align-items: center;
15
- gap: 10px;
16
- }
17
-
18
-
19
- .box-shadow {
20
- -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
21
- -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
22
- box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
23
- }
24
-
25
- .ov__skeleton--animation {
26
- animation: skeleton-loading 1s linear infinite alternate;
27
- }
28
- @keyframes skeleton-loading {
29
- 0% {
30
- background-color: #F7F7F7;
31
- }
32
- 70% {
33
- background-color: #EDEDED;
34
- }
35
- 100% {
36
- background-color: #EDEDED;
37
- }
38
- }
39
-
40
- .skeleton-picker {
41
- position: absolute;
42
- width: 100%;
43
- height: 100%;
44
- z-index: 91;
45
- border-radius: 5px;
46
- background-color: #FFF;
47
- border: 1px solid #CCC;
48
- }
49
-
50
- .skeleton-options {
51
- width: 100%;
52
- height: 48px;
53
- display: flex;
54
- justify-content: space-between;
55
- align-items: center;
56
- padding: 0 15px;
57
- border-bottom: 1px solid #CCC;
58
- }
59
- .skeleton-options .opt {
60
- width: 25px;
61
- height: 50%;
62
- }
63
-
64
- .skeleton-input {
65
- width: calc(100% - 30px);
66
- height: 25px;
67
- margin: 7px 15px;
68
- border-radius: 2.5px;
69
- }
70
-
71
- .skeleton-label {
72
- margin: 15px 0;
73
- width: 100%;
74
- height: 30px;
75
- }
76
-
77
- .skeleton-list {
78
- width: 100%;
79
- padding-left: 7.5px;
80
- display: flex;
81
- align-items: center;
82
- flex-wrap: wrap;
83
- }
84
-
85
- .skeleton-list .opt {
86
- margin: 0 5px 15px 6px;
87
- width: 25px;
88
- height: 25px;
89
- }
90
-
91
-
92
- .box-shadow {
93
- -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
94
- 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
95
- -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
96
- 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
97
- box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
98
- 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
99
- }
100
-
101
- .sm-emoji-picker {
102
- width: 310px;
103
- z-index: 2;
104
- border: 1px solid #ccc;
105
- border-radius: 5px;
106
- background-color: #fff;
2
+ .tg-container {
3
+ width: 100%;
4
+ max-width: 800px;
107
5
  display: flex;
108
6
  flex-direction: column;
7
+ overflow-x: hidden;
8
+ overflow-y: auto;
109
9
  }
110
10
 
111
- .sm-emoji-header {
11
+ .tg-options {
112
12
  width: 100%;
113
13
  display: flex;
114
- align-items: center;
115
- justify-content: space-between;
116
- margin: 10px 0;
117
- border-bottom: 1px solid #ccc;
14
+ }
15
+ .tg-options.column {
16
+ flex-direction: column;
17
+ }
18
+ .tg-options h4 {
19
+ margin-right: 5px;
118
20
  }
119
21
 
120
- .sm-emoji-link {
121
- padding: 0 5px 5px 5px;
22
+ .ts-image-type {
122
23
  display: flex;
123
- justify-content: center;
124
24
  align-items: center;
125
- cursor: pointer;
126
- opacity: 0.9;
127
- transition: all 200ms;
128
- border-bottom: 2px solid transparent;
129
- }
130
- .sm-emoji-link a {
131
- margin: 0;
132
- padding: 0;
133
- fill: #999;
134
- }
135
- .sm-emoji-link:hover a > svg,
136
- .sm-emoji-link.active a > svg {
137
- opacity: 1;
138
- fill: #666;
139
25
  }
140
- .sm-emoji-link:hover a > svg[stroke-linecap],
141
- .sm-emoji-link.active a > svg[stroke-linecap] {
142
- opacity: 1;
143
- fill: transparent;
144
- stroke: #666;
26
+
27
+ .ts-image-type img {
28
+ cursor: pointer;
145
29
  }
146
- .sm-emoji-link.active {
147
- border-bottom: 2px solid #666;
30
+
31
+ .ts-image-type svg {
32
+ font-size: 25px;
33
+ cursor: pointer;
148
34
  }
149
35
 
150
- .sm-emoji-scroll {
151
- width: 100%;
152
- height: calc(100% - 52px);
153
- max-height: calc(100% - 52px);
154
- scroll-behavior: smooth;
155
- overflow-y: auto;
156
- overflow-x: hidden;
157
- scrollbar-color: #888 rgba(0, 0, 0, 0.2);
158
- scrollbar-width: 8px;
159
- position: relative;
36
+ .ts-image-type .select-image {
37
+ color: #838383;
160
38
  }
161
- .sm-emoji-scroll::-webkit-scrollbar {
162
- width: 8px;
39
+
40
+ .color-red {
41
+ color: #e74c3c;
163
42
  }
164
43
 
165
- .sm-emoji-scroll::-webkit-scrollbar-track {
166
- background-color: rgba(0, 0, 0, 0.2);
44
+ .color-blue {
45
+ color: #007bff;
167
46
  }
168
47
 
169
- .sm-emoji-scroll::-webkit-scrollbar-thumb {
170
- transition-duration: 0.5s;
171
- background-color: #666;
48
+ .color-black {
49
+ color: #333;
172
50
  }
173
51
 
174
- .sm-emoji-scroll::-webkit-scrollbar-thumb:hover {
175
- background-color: #555;
52
+ .color-purple {
53
+ color: #a312a3;
176
54
  }
177
55
 
178
- .sm-emoji-search {
179
- width: 100%;
56
+ .custom-tooltip-image {
180
57
  display: flex;
181
- align-items: center;
182
58
  justify-content: center;
183
- position: sticky;
184
- top: 0;
185
- z-index: 1;
186
- background: #fff;
187
- padding-bottom: 10px;
188
- }
189
- .sm-emoji-search > input {
190
- width: 90%;
191
- outline: none;
192
- border: 1px solid #ccc;
193
- border-radius: 2.5px;
194
- padding: 5px 10px;
195
- transition: border 200ms;
59
+ align-items: center;
60
+ overflow: visible;
61
+ padding: 5px;
196
62
  }
197
- .sm-emoji-search > input:focus,
198
- .sm-emoji-search > input:active,
199
- .sm-emoji-search > input:hover {
200
- outline: none;
201
- border: 1px solid #999;
63
+
64
+ .custom-tooltip-image img {
65
+ max-width: 75px;
66
+ max-height: 75px;
202
67
  }
203
- .sm-emoji-search.sticky {
204
- position: fixed;
205
- width: 310px;
68
+
69
+ .ts-button {
206
70
  background-color: #fff;
71
+ border-radius: 10px;
72
+ display: flex;
73
+ justify-content: center;
74
+ align-items: center;
75
+ padding: 3px 15px;
76
+ transition: background-color 150ms ease-in-out;
207
77
  }
208
78
 
209
- .sm-emoji-selection {
210
- width: 100%;
211
- margin-bottom: 10px;
79
+ .ts-button:hover {
80
+ background-color: rgb(253, 253, 253);
212
81
  }
213
- .sm-emoji-title {
214
- width: 100%;
82
+
83
+ .tg-select {
84
+ flex: 1;
85
+ height: 34px;
86
+ overflow: hidden;
87
+ }
88
+ .tg-select .vs__dropdown-toggle {
89
+ background-color: #fff;
90
+ height: 34px;
91
+ overflow: hidden;
215
92
  display: flex;
216
- justify-content: flex-start;
217
93
  align-items: center;
218
- background-color: #f7f7f7;
219
- padding: 5px 0;
94
+ }
95
+ .tg-select .vs__selected-options {
96
+ height: 34px;
97
+ overflow: hidden;
98
+ }
99
+ .tg-select .vs__selected-options > span {
220
100
  white-space: nowrap;
221
101
  text-overflow: ellipsis;
222
- overflow: hidden;
102
+ flex: 1;
223
103
  }
224
- .sm-emoji-title svg {
225
- margin: 0 5px;
104
+
105
+ .vs__dropdown-option.vs__dropdown-option--selected {
106
+ background-color: rgb(26, 95, 173) !important;
107
+ color: white;
226
108
  }
227
109
 
228
- .sm-emoji-group {
229
- width: 100%;
230
- display: flex;
231
- flex-wrap: wrap;
232
- font-size: 22px;
110
+ .vs__dropdown-menu li {
111
+ padding: 10px 15px;
233
112
  }
234
113
 
235
- .sm-emoji-item {
236
- cursor: pointer;
237
- opacity: 0.8;
238
- transition: opacity 200ms;
239
- margin: 3.5px;
114
+ .vs__dropdown-option {
115
+ transition: background-color 150ms;
116
+ white-space: normal;
240
117
  }
241
- .sm-emoji-item:hover {
242
- opacity: 1;
118
+ .vs__dropdown-option:nth-child(odd) {
119
+ background-color: #f1f1f1;
243
120
  }
244
-
245
-
246
- .emoji-text-container {
247
- position: relative;
121
+ .vs__dropdown-option:hover,
122
+ .vs__dropdown-option:focus,
123
+ .vs__dropdown-option:active,
124
+ .vs__dropdown-option:focus,
125
+ .vs__dropdown-option--selected,
126
+ .vs__dropdown-option--highlight {
127
+ background-color: #5897fb !important;
128
+ color: #fff;
248
129
  }
249
- .emoji-text-container .emoji-text-btn {
250
- font-size: 19.2px;
251
- cursor: pointer;
130
+
131
+ .tg-component {
132
+ width: 100%;
252
133
  }
253
-
254
134
 
255
- .req-loader-container {
256
- position: absolute;
257
- z-index: 1;
258
- top: 0;
259
- left: 0;
135
+ .ts-container {
260
136
  width: 100%;
261
- height: 100%;
262
137
  display: flex;
263
- justify-content: center;
264
- align-items: center;
265
- }
266
- .req-loader-container.light-bg {
267
- background-color: rgba(0, 0, 0, 0.3);
268
- border-radius: inherit;
269
- }
270
- .req-loader-container.align-right {
271
- justify-content: flex-end;
272
- }
273
- .req-loader-container.align-right .req-loader {
274
- margin-right: 15px;
138
+ justify-content: space-between;
139
+ gap: 10px;
275
140
  }
276
141
 
277
- .req-loader {
278
- border: 2px solid #CCC;
279
- border-top: 2px solid #333;
280
- border-radius: 50%;
281
- width: 20px;
282
- height: 20px;
283
- min-width: 20px;
284
- min-height: 20px;
285
- animation: spin 2s linear infinite;
142
+ .ts-content {
143
+ --border-color: #ccc;
144
+ --background-color: #dff0d8;
145
+ --input-background-color: #fff;
146
+ --input-border-default: #007bff;
147
+ --input-border-error: #e74c3c;
148
+ --placeholder-color: #bbb;
149
+ --border-radius: 5px;
150
+
151
+ flex: 2;
152
+ font-size: 11.2px;
153
+ padding: 10px 0;
154
+ display: flex;
155
+ flex-direction: column;
286
156
  }
287
- .req-loader.big {
288
- width: 40px;
289
- height: 40px;
290
- animation: spin 3s linear infinite;
157
+ .order-1 {
158
+ order: 1;
291
159
  }
292
- .req-loader.slow {
293
- animation: spin 4s linear infinite;
160
+ .custom-box-shadow-bottom {
161
+ box-shadow: 0px 3px 4px -3px rgba(0, 0, 0, 0.3);
294
162
  }
295
-
296
- @keyframes spin {
297
- 0% { transform: rotate(0deg); }
298
- 100% { transform: rotate(360deg); }
163
+ .custom-border-gray {
164
+ border: 1px solid var(--border-color) !important;
299
165
  }
300
-
301
-
302
-
303
- .single-file-preview .close-icon {
304
- color: #E74C3C;
305
- cursor: pointer;
306
- opacity: .9;
307
- transition: opacity 300ms;
308
- }
309
- .single-file-preview .close-icon:hover {
310
- opacity: 1;
311
- }
312
- .text-footer-invalid-format {
313
- color: #222;
314
- padding: 10px;
315
- }
316
- .text-footer-invalid-format h3 {
317
- font-weight: 500;
318
- }
319
- .text-footer-invalid-format h4 {
320
- font-size: 14.4px;
321
- }
322
- .text-footer-preview-title {
323
- font-size: 16px;
324
- padding: 10px 0 0 10px;
325
- white-space: nowrap;
326
- overflow: hidden;
327
- text-overflow: ellipsis;
328
- }
329
- .text-footer-image-preview {
330
- display: flex;
331
- justify-content: center;
332
- align-items: center;
333
- width: 100%;
334
- }
335
- .text-footer-image-preview img {
336
- cursor: pointer;
337
- max-width: 98%;
338
- max-height: 98%;
339
- padding: 2%;
340
- }
341
-
342
-
343
- .multiple-file-preview {
344
- position: relative;
345
- display: flex;
346
- flex-direction: column;
347
- width: 100%;
348
- height: 100%;
349
- max-height: 100%;
350
- overflow-y: auto;
351
- overflow-x: hidden;
352
- border-top-left-radius: 2.5px;
353
- border-top-right-radius: 2.5px;
354
- transition: background-color 150ms;
355
- scrollbar-color: #888 rgba(0, 0, 0, 0.2);
356
- scrollbar-width: 4px;
357
- }
358
- .multiple-file-preview::-webkit-scrollbar{
359
- width: 4px;
360
- }
361
-
362
- .multiple-file-preview .close-icon {
363
- color: #E74C3C;
364
- cursor: pointer;
365
- opacity: .9;
366
- transition: opacity 300ms;
367
- }
368
- .multiple-file-preview .close-icon:hover {
369
- opacity: 1;
370
- }
371
-
372
- .multiple-file-preview::-webkit-scrollbar-track{
373
- background-color: rgba(0, 0, 0, 0.2);
374
- }
375
-
376
- .multiple-file-preview::-webkit-scrollbar-thumb{
377
- transition-duration: .5s;
378
- background-color: #222
379
- }
380
-
381
- .multiple-file-preview::-webkit-scrollbar-thumb:hover{
382
- background-color: #555
383
- }
384
-
385
- .text-footer-invalid-format {
386
- color: #222;
387
- padding: 10px;
388
- }
389
- .text-footer-invalid-format h3 {
390
- text-overflow: ellipsis;
391
- overflow: hidden;
392
- font-weight: 500;
393
- }
394
- .text-footer-invalid-format h4 {
395
- text-overflow: ellipsis;
396
- overflow: hidden;
397
- font-size: 14.4px;
398
- }
399
-
400
- .text-footer-exclude-file {
401
- position: absolute;
402
- top: 5px;
403
- right: 5px;
404
- cursor: pointer;
405
- display: flex;
406
- justify-content: center;
407
- align-items: center;
408
- min-width: 16px;
409
- min-height: 16px;
410
- background-color: #FFF;
411
- border-radius: 50%;
412
- }
413
- .text-footer-exclude-file svg {
414
- transition: color 200ms;
415
- color: #e9594a;
416
- }
417
- .text-footer-exclude-file svg:hover {
418
- color: #E74C3C;
419
- }
420
-
421
- .file-preview {
422
- display: flex;
423
- width: 100%;
424
- align-items: center;
425
- padding: 5px 10px;
426
- transition: background-color 150ms;
427
- }
428
- .file-preview:hover {
429
- background-color: rgba(0, 0, 0, .1)
430
- }
431
-
432
- .file-title {
433
- color: #222;
434
- display: flex;
435
- align-items: center;
436
- white-space: nowrap;
437
- text-overflow: ellipsis;
438
- overflow: hidden;
439
- padding: 4px 10px;
440
- background-color: #FFF;
441
- border-radius: 30px;
442
- display: inline-block;
443
- }
444
- .file-title.red {
445
- color: #E74C3C;
446
- margin-right: 5px;
447
- }
448
- .file-title > svg {
449
- margin-right: 5px;
450
- color: #333;
451
- }
452
-
453
- .small-img {
454
- flex: 1;
455
- margin: 0 15px;
456
- display: flex;
457
- justify-content: center;
458
- align-items: center;
459
- position: relative;
460
- }
461
- .small-img img {
462
- height: 40px;
463
- cursor: pointer;
464
- }
465
- .small-img .pdf, .small-img .doc {
466
- display: flex;
467
- justify-content: center;
468
- align-items: center;
469
- font-size: 30px;
470
- }
471
- .small-img .pdf {
472
- color: #E74C3C;
473
- }
474
- .small-img .doc {
475
- color: #006bc9;
476
- }
477
- .small-img .pdf svg, .small-img .doc svg{
478
- z-index: 1;
479
- }
480
- .small-img .pdf::after, .small-img .doc::after {
481
- content: "";
482
- position: absolute;
483
- bottom: 2px;
484
- transform: translateY(2px);
485
- width: 20px;
486
- height: 20px;
487
- background-color: #FFF;
488
- }
489
- .img-container {
490
- padding: 5px;
491
- border-radius: 2.5px;
492
- background-color: rgba(0, 0, 0, .15);
493
- display: flex;
494
- justify-content: center;
495
- align-items: center;
496
- }
497
-
498
- .delete-file {
499
- display: flex;
500
- justify-content: center;
501
- align-items: center;
502
- cursor: pointer;
503
- }
504
- .delete-file > svg {
505
- font-size: 16px;
506
- color: #E74C3C;
507
- }
508
-
509
-
510
- .fade-enter-active,
511
- .fade-leave-active {
512
- transition: opacity 0.3s;
166
+ .ts-content header,
167
+ .ts-content section,
168
+ .ts-content footer {
169
+ padding: 3px 5px;
170
+ background-color: var(--background-color);
513
171
  }
514
- .fade-enter,
515
- .fade-leave-to {
516
- opacity: 0;
172
+ .ts-content header,
173
+ .ts-content section {
174
+ border-right: 1px solid var(--border-color);
175
+ border-left: 1px solid var(--border-color);
176
+ }
177
+ .ts-content header {
178
+ border-top-left-radius: var(--border-radius);
179
+ border-top-right-radius: var(--border-radius);
180
+ border-top: 1px solid var(--border-color);
181
+ }
182
+ .ts-content header {
183
+ font-weight: 550;
184
+ }
185
+ .ts-content section {
186
+ line-height: 25px;
187
+ }
188
+ .ts-content section.margin-bottom {
189
+ border-bottom-left-radius: var(--border-radius);
190
+ border-bottom-right-radius: var(--border-radius);
191
+ border-bottom: 1px solid var(--border-color);
192
+ }
193
+ .ts-content footer,
194
+ .custom-footer-style {
195
+ border: 1px solid var(--border-color);
196
+ border-top: unset;
197
+ border-bottom-left-radius: var(--border-radius);
198
+ border-bottom-right-radius: var(--border-radius);
199
+ }
200
+ .ts-content input {
201
+ border: 1px solid transparent;
202
+ outline: 0;
203
+ font-size: 12.8px;
204
+ padding: 2.5px 5px;
205
+ background-color: var(--input-background-color);
206
+ }
207
+ .ts-content input::placeholder {
208
+ color: var(--placeholder-color);
209
+ }
210
+ .ts-content input.active,
211
+ .ts-content input:focus {
212
+ border: 1px solid var(--input-border-default);
213
+ }
214
+ .ts-content input.invalid {
215
+ border: 1px solid var(--input-border-error) !important;
216
+ }
217
+ .ts-content__var {
218
+ display: inline-block;
219
+ position: relative;
517
220
  }
518
221
 
519
- .files-counter {
222
+ .ts-dropdown {
223
+ margin: 0;
224
+ padding: 0;
520
225
  position: absolute;
521
- top: unset;
522
- transform: translate(17.5px, -15px);
523
- background-color: #888;
226
+ top: 19px;
227
+ left: 0;
228
+ background: #eee;
229
+ width: 100%;
524
230
  z-index: 1;
525
- font-size: 8px;
526
- width: 15px;
527
- height: 15px;
528
- border-radius: 50%;
529
- display: flex;
530
- justify-content: center;
531
- align-items: center;
532
- cursor: pointer;
231
+ transition: all 150ms;
232
+ visibility: hidden;
233
+ opacity: 0;
234
+ list-style-type: none;
235
+ border: 1px solid #444;
236
+ border-top: unset;
237
+ }
238
+ .ts-dropdown li {
239
+ width: 100%;
533
240
  opacity: 0.9;
534
- transition: all 300ms;
241
+ cursor: pointer;
242
+ font-weight: 550;
243
+ padding: 2px 3px;
244
+ font-size: 12.8px;
245
+ transition: background-color 150ms;
246
+ }
247
+ .ts-dropdown li:hover,
248
+ .ts-dropdown li:focus-within,
249
+ .ts-dropdown li:focus {
250
+ opacity: 1;
251
+ background-color: #555;
535
252
  color: #fff;
536
- font-weight: 900;
537
253
  }
538
- .files-counter:hover {
254
+ .ts-dropdown.visible {
255
+ visibility: visible;
539
256
  opacity: 1;
540
257
  }
541
- .files-counter-2 {
542
- transform: translate(-15px, 28px);
543
- opacity: 0.9;
544
- position: absolute;
258
+ .tg-btn {
259
+ width: auto;
545
260
  display: flex;
546
261
  justify-content: center;
547
262
  align-items: center;
548
- color: #888;
549
- font-size: 12.8px;
550
263
  }
551
- .files-counter-2 svg {
552
- margin-left: 5px;
264
+ .tg-btn button {
265
+ border: unset;
266
+ display: block;
267
+ min-width: 180px;
268
+ height: 35px;
269
+ padding: 0 10px;
270
+ font-weight: 500;
271
+ background-color: #007bff;
272
+ color: #fff;
273
+ transition: transform 300ms ease-in-out;
274
+ user-select: none;
275
+ cursor: pointer;
276
+ box-shadow: inset 0 -2px rgba(0, 0, 0, 0.2);
277
+ opacity: 0.9;
278
+ border-radius: 2.5px;
553
279
  }
554
- .files-counter-2:hover {
280
+ .tg-btn button > svg {
281
+ margin-right: 5px;
282
+ color: #003166;
283
+ }
284
+ .tg-btn button:hover {
555
285
  opacity: 1;
556
- text-decoration: underline;
557
286
  }
558
-
559
-
560
- .transition-selects {
561
- min-height: 80px;display: flex; flex-direction: column; width: 100%;
287
+ .tg-btn button:active {
288
+ opacity: 1;
289
+ box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
290
+ -webkit-transform: translateY(1px);
291
+ -moz-transform: translateY(1px);
292
+ -o-transform: translateY(1px);
293
+ -ms-transform: translateY(1px);
294
+ transform: translateY(1px);
562
295
  }
563
- .loader-select {
564
- position: relative; min-height: 35px;background: #FFF;width: 100%; border: 1px solid #ccc;border-radius: 5px;z-index: 1;
296
+ .tg-btn button:active {
297
+ opacity: 1;
298
+ box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
299
+ -webkit-transform: translateY(1px);
300
+ -moz-transform: translateY(1px);
301
+ -o-transform: translateY(1px);
302
+ -ms-transform: translateY(1px);
303
+ transform: translateY(1px);
565
304
  }
566
- .loading-message {
567
- background-color: #555!important;
305
+ .tg-btn button:focus,
306
+ .tg-btn button:active {
307
+ outline: 2px solid black;
568
308
  }
569
-
570
-
571
- .text-footer-actions--btn {
572
- position: relative;
309
+ .tg-btn.small-btn {
310
+ width: auto;
311
+ margin: 0 5px;
573
312
  }
574
- .text-footer-actions--btn > svg:nth-child(1) {
575
- font-size: 19.2px;
313
+ .tg-btn.small-btn svg {
314
+ margin-right: 0;
576
315
  }
577
- .text-footer-actions--btn > svg:nth-child(2) {
578
- font-size: 9.6px;
579
- position: absolute;
580
- transform: translateY(-2px);
316
+ .tg-btn.small-btn button {
317
+ min-width: 35px;
318
+ width: 35px;
319
+ padding: 0;
320
+ display: flex;
321
+ justify-content: center;
322
+ align-items: center;
581
323
  }
582
-
583
324
 
584
- .multiplos {
325
+ .tm-container {
326
+ border: 1px solid var(--border-color);
327
+ border-radius: 5px;
585
328
  display: flex;
586
329
  }
587
- .multiplos svg {
588
- font-size: 15.2px;
589
- }
590
- .multiplos svg.small {
591
- font-size: 11.2px !important;
592
- }
330
+
331
+
332
+ .btn-red button {
333
+ background-color: red;
334
+ }
335
+
336
+ .btn-red svg {
337
+ color: rgb(182, 0, 0);
338
+ }
339
+
340
+ .container-btns {
341
+ display: flex;
342
+ flex-direction: column;
343
+ justify-content: center;
344
+ align-items: center;
345
+ gap: 10px;
346
+ }
593
347
 
594
348
 
595
349
  .text-footer-container {
@@ -967,334 +721,580 @@
967
721
  }
968
722
 
969
723
 
970
- .tg-container {
971
- width: 100%;
972
- max-width: 800px;
973
- display: flex;
974
- flex-direction: column;
975
- overflow-x: hidden;
976
- overflow-y: auto;
724
+ .emoji-text-container {
725
+ position: relative;
726
+ }
727
+ .emoji-text-container .emoji-text-btn {
728
+ font-size: 19.2px;
729
+ cursor: pointer;
977
730
  }
731
+
978
732
 
979
- .tg-options {
980
- width: 100%;
981
- display: flex;
733
+ .box-shadow {
734
+ -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
735
+ 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
736
+ -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
737
+ 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
738
+ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
739
+ 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
982
740
  }
983
- .tg-options.column {
741
+
742
+ .sm-emoji-picker {
743
+ width: 310px;
744
+ z-index: 2;
745
+ border: 1px solid #ccc;
746
+ border-radius: 5px;
747
+ background-color: #fff;
748
+ display: flex;
984
749
  flex-direction: column;
985
750
  }
986
- .tg-options h4 {
987
- margin-right: 5px;
988
- }
989
751
 
990
- .ts-image-type {
752
+ .sm-emoji-header {
753
+ width: 100%;
991
754
  display: flex;
992
755
  align-items: center;
756
+ justify-content: space-between;
757
+ margin: 10px 0;
758
+ border-bottom: 1px solid #ccc;
993
759
  }
994
760
 
995
- .ts-image-type img {
996
- cursor: pointer;
997
- }
998
-
999
- .ts-image-type svg {
1000
- font-size: 25px;
761
+ .sm-emoji-link {
762
+ padding: 0 5px 5px 5px;
763
+ display: flex;
764
+ justify-content: center;
765
+ align-items: center;
1001
766
  cursor: pointer;
767
+ opacity: 0.9;
768
+ transition: all 200ms;
769
+ border-bottom: 2px solid transparent;
1002
770
  }
1003
-
1004
- .ts-image-type .select-image {
1005
- color: #838383;
771
+ .sm-emoji-link a {
772
+ margin: 0;
773
+ padding: 0;
774
+ fill: #999;
1006
775
  }
1007
-
1008
- .color-red {
1009
- color: #e74c3c;
776
+ .sm-emoji-link:hover a > svg,
777
+ .sm-emoji-link.active a > svg {
778
+ opacity: 1;
779
+ fill: #666;
1010
780
  }
1011
-
1012
- .color-blue {
1013
- color: #007bff;
781
+ .sm-emoji-link:hover a > svg[stroke-linecap],
782
+ .sm-emoji-link.active a > svg[stroke-linecap] {
783
+ opacity: 1;
784
+ fill: transparent;
785
+ stroke: #666;
1014
786
  }
1015
-
1016
- .color-black {
1017
- color: #333;
787
+ .sm-emoji-link.active {
788
+ border-bottom: 2px solid #666;
1018
789
  }
1019
790
 
1020
- .color-purple {
1021
- color: #a312a3;
791
+ .sm-emoji-scroll {
792
+ width: 100%;
793
+ height: calc(100% - 52px);
794
+ max-height: calc(100% - 52px);
795
+ scroll-behavior: smooth;
796
+ overflow-y: auto;
797
+ overflow-x: hidden;
798
+ scrollbar-color: #888 rgba(0, 0, 0, 0.2);
799
+ scrollbar-width: 8px;
800
+ position: relative;
1022
801
  }
1023
-
1024
- .custom-tooltip-image {
1025
- display: flex;
1026
- justify-content: center;
1027
- align-items: center;
1028
- overflow: visible;
1029
- padding: 5px;
802
+ .sm-emoji-scroll::-webkit-scrollbar {
803
+ width: 8px;
1030
804
  }
1031
805
 
1032
- .custom-tooltip-image img {
1033
- max-width: 75px;
1034
- max-height: 75px;
806
+ .sm-emoji-scroll::-webkit-scrollbar-track {
807
+ background-color: rgba(0, 0, 0, 0.2);
1035
808
  }
1036
809
 
1037
- .ts-button {
1038
- background-color: #fff;
1039
- border-radius: 10px;
1040
- display: flex;
1041
- justify-content: center;
1042
- align-items: center;
1043
- padding: 3px 15px;
1044
- transition: background-color 150ms ease-in-out;
810
+ .sm-emoji-scroll::-webkit-scrollbar-thumb {
811
+ transition-duration: 0.5s;
812
+ background-color: #666;
1045
813
  }
1046
814
 
1047
- .ts-button:hover {
1048
- background-color: rgb(253, 253, 253);
815
+ .sm-emoji-scroll::-webkit-scrollbar-thumb:hover {
816
+ background-color: #555;
1049
817
  }
1050
818
 
1051
- .tg-select {
1052
- flex: 1;
1053
- height: 34px;
1054
- overflow: hidden;
1055
- }
1056
- .tg-select .vs__dropdown-toggle {
1057
- background-color: #fff;
1058
- height: 34px;
1059
- overflow: hidden;
819
+ .sm-emoji-search {
820
+ width: 100%;
1060
821
  display: flex;
1061
822
  align-items: center;
823
+ justify-content: center;
824
+ position: sticky;
825
+ top: 0;
826
+ z-index: 1;
827
+ background: #fff;
828
+ padding-bottom: 10px;
1062
829
  }
1063
- .tg-select .vs__selected-options {
1064
- height: 34px;
1065
- overflow: hidden;
1066
- }
1067
- .tg-select .vs__selected-options > span {
1068
- white-space: nowrap;
1069
- text-overflow: ellipsis;
1070
- flex: 1;
1071
- }
1072
-
1073
- .vs__dropdown-option.vs__dropdown-option--selected {
1074
- background-color: rgb(26, 95, 173) !important;
1075
- color: white;
1076
- }
1077
-
1078
- .vs__dropdown-menu li {
1079
- padding: 10px 15px;
1080
- }
1081
-
1082
- .vs__dropdown-option {
1083
- transition: background-color 150ms;
1084
- white-space: normal;
830
+ .sm-emoji-search > input {
831
+ width: 90%;
832
+ outline: none;
833
+ border: 1px solid #ccc;
834
+ border-radius: 2.5px;
835
+ padding: 5px 10px;
836
+ transition: border 200ms;
1085
837
  }
1086
- .vs__dropdown-option:nth-child(odd) {
1087
- background-color: #f1f1f1;
838
+ .sm-emoji-search > input:focus,
839
+ .sm-emoji-search > input:active,
840
+ .sm-emoji-search > input:hover {
841
+ outline: none;
842
+ border: 1px solid #999;
1088
843
  }
1089
- .vs__dropdown-option:hover,
1090
- .vs__dropdown-option:focus,
1091
- .vs__dropdown-option:active,
1092
- .vs__dropdown-option:focus,
1093
- .vs__dropdown-option--selected,
1094
- .vs__dropdown-option--highlight {
1095
- background-color: #5897fb !important;
1096
- color: #fff;
844
+ .sm-emoji-search.sticky {
845
+ position: fixed;
846
+ width: 310px;
847
+ background-color: #fff;
1097
848
  }
1098
849
 
1099
- .tg-component {
850
+ .sm-emoji-selection {
1100
851
  width: 100%;
852
+ margin-bottom: 10px;
1101
853
  }
1102
-
1103
- .ts-container {
854
+ .sm-emoji-title {
1104
855
  width: 100%;
1105
856
  display: flex;
1106
- justify-content: space-between;
1107
- gap: 10px;
1108
- }
1109
-
1110
- .ts-content {
1111
- --border-color: #ccc;
1112
- --background-color: #dff0d8;
1113
- --input-background-color: #fff;
1114
- --input-border-default: #007bff;
1115
- --input-border-error: #e74c3c;
1116
- --placeholder-color: #bbb;
1117
- --border-radius: 5px;
1118
-
1119
- flex: 2;
1120
- font-size: 11.2px;
1121
- padding: 10px 0;
1122
- display: flex;
1123
- flex-direction: column;
1124
- }
1125
- .order-1 {
1126
- order: 1;
1127
- }
1128
- .custom-box-shadow-bottom {
1129
- box-shadow: 0px 3px 4px -3px rgba(0, 0, 0, 0.3);
1130
- }
1131
- .custom-border-gray {
1132
- border: 1px solid var(--border-color) !important;
857
+ justify-content: flex-start;
858
+ align-items: center;
859
+ background-color: #f7f7f7;
860
+ padding: 5px 0;
861
+ white-space: nowrap;
862
+ text-overflow: ellipsis;
863
+ overflow: hidden;
1133
864
  }
1134
- .ts-content header,
1135
- .ts-content section,
1136
- .ts-content footer {
1137
- padding: 3px 5px;
1138
- background-color: var(--background-color);
865
+ .sm-emoji-title svg {
866
+ margin: 0 5px;
1139
867
  }
1140
- .ts-content header,
1141
- .ts-content section {
1142
- border-right: 1px solid var(--border-color);
1143
- border-left: 1px solid var(--border-color);
868
+
869
+ .sm-emoji-group {
870
+ width: 100%;
871
+ display: flex;
872
+ flex-wrap: wrap;
873
+ font-size: 22px;
1144
874
  }
1145
- .ts-content header {
1146
- border-top-left-radius: var(--border-radius);
1147
- border-top-right-radius: var(--border-radius);
1148
- border-top: 1px solid var(--border-color);
875
+
876
+ .sm-emoji-item {
877
+ cursor: pointer;
878
+ opacity: 0.8;
879
+ transition: opacity 200ms;
880
+ margin: 3.5px;
1149
881
  }
1150
- .ts-content header {
1151
- font-weight: 550;
882
+ .sm-emoji-item:hover {
883
+ opacity: 1;
1152
884
  }
1153
- .ts-content section {
1154
- line-height: 25px;
885
+
886
+
887
+ .box-shadow {
888
+ -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
889
+ -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
890
+ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
891
+ }
892
+
893
+ .ov__skeleton--animation {
894
+ animation: skeleton-loading 1s linear infinite alternate;
895
+ }
896
+ @keyframes skeleton-loading {
897
+ 0% {
898
+ background-color: #F7F7F7;
899
+ }
900
+ 70% {
901
+ background-color: #EDEDED;
902
+ }
903
+ 100% {
904
+ background-color: #EDEDED;
905
+ }
906
+ }
907
+
908
+ .skeleton-picker {
909
+ position: absolute;
910
+ width: 100%;
911
+ height: 100%;
912
+ z-index: 91;
913
+ border-radius: 5px;
914
+ background-color: #FFF;
915
+ border: 1px solid #CCC;
916
+ }
917
+
918
+ .skeleton-options {
919
+ width: 100%;
920
+ height: 48px;
921
+ display: flex;
922
+ justify-content: space-between;
923
+ align-items: center;
924
+ padding: 0 15px;
925
+ border-bottom: 1px solid #CCC;
926
+ }
927
+ .skeleton-options .opt {
928
+ width: 25px;
929
+ height: 50%;
930
+ }
931
+
932
+ .skeleton-input {
933
+ width: calc(100% - 30px);
934
+ height: 25px;
935
+ margin: 7px 15px;
936
+ border-radius: 2.5px;
937
+ }
938
+
939
+ .skeleton-label {
940
+ margin: 15px 0;
941
+ width: 100%;
942
+ height: 30px;
943
+ }
944
+
945
+ .skeleton-list {
946
+ width: 100%;
947
+ padding-left: 7.5px;
948
+ display: flex;
949
+ align-items: center;
950
+ flex-wrap: wrap;
951
+ }
952
+
953
+ .skeleton-list .opt {
954
+ margin: 0 5px 15px 6px;
955
+ width: 25px;
956
+ height: 25px;
957
+ }
958
+
959
+
960
+ .req-loader-container {
961
+ position: absolute;
962
+ z-index: 1;
963
+ top: 0;
964
+ left: 0;
965
+ width: 100%;
966
+ height: 100%;
967
+ display: flex;
968
+ justify-content: center;
969
+ align-items: center;
1155
970
  }
1156
- .ts-content section.margin-bottom {
1157
- border-bottom-left-radius: var(--border-radius);
1158
- border-bottom-right-radius: var(--border-radius);
1159
- border-bottom: 1px solid var(--border-color);
971
+ .req-loader-container.light-bg {
972
+ background-color: rgba(0, 0, 0, 0.3);
973
+ border-radius: inherit;
1160
974
  }
1161
- .ts-content footer,
1162
- .custom-footer-style {
1163
- border: 1px solid var(--border-color);
1164
- border-top: unset;
1165
- border-bottom-left-radius: var(--border-radius);
1166
- border-bottom-right-radius: var(--border-radius);
975
+ .req-loader-container.align-right {
976
+ justify-content: flex-end;
977
+ }
978
+ .req-loader-container.align-right .req-loader {
979
+ margin-right: 15px;
1167
980
  }
1168
- .ts-content input {
1169
- border: 1px solid transparent;
1170
- outline: 0;
1171
- font-size: 12.8px;
1172
- padding: 2.5px 5px;
1173
- background-color: var(--input-background-color);
981
+
982
+ .req-loader {
983
+ border: 2px solid #CCC;
984
+ border-top: 2px solid #333;
985
+ border-radius: 50%;
986
+ width: 20px;
987
+ height: 20px;
988
+ min-width: 20px;
989
+ min-height: 20px;
990
+ animation: spin 2s linear infinite;
1174
991
  }
1175
- .ts-content input::placeholder {
1176
- color: var(--placeholder-color);
992
+ .req-loader.big {
993
+ width: 40px;
994
+ height: 40px;
995
+ animation: spin 3s linear infinite;
1177
996
  }
1178
- .ts-content input.active,
1179
- .ts-content input:focus {
1180
- border: 1px solid var(--input-border-default);
997
+ .req-loader.slow {
998
+ animation: spin 4s linear infinite;
1181
999
  }
1182
- .ts-content input.invalid {
1183
- border: 1px solid var(--input-border-error) !important;
1000
+
1001
+ @keyframes spin {
1002
+ 0% { transform: rotate(0deg); }
1003
+ 100% { transform: rotate(360deg); }
1184
1004
  }
1185
- .ts-content__var {
1186
- display: inline-block;
1187
- position: relative;
1005
+
1006
+
1007
+
1008
+ .fade-enter-active,
1009
+ .fade-leave-active {
1010
+ transition: opacity 0.3s;
1011
+ }
1012
+ .fade-enter,
1013
+ .fade-leave-to {
1014
+ opacity: 0;
1188
1015
  }
1189
1016
 
1190
- .ts-dropdown {
1191
- margin: 0;
1192
- padding: 0;
1017
+ .files-counter {
1193
1018
  position: absolute;
1194
- top: 19px;
1195
- left: 0;
1196
- background: #eee;
1197
- width: 100%;
1019
+ top: unset;
1020
+ transform: translate(17.5px, -15px);
1021
+ background-color: #888;
1198
1022
  z-index: 1;
1199
- transition: all 150ms;
1200
- visibility: hidden;
1201
- opacity: 0;
1202
- list-style-type: none;
1203
- border: 1px solid #444;
1204
- border-top: unset;
1205
- }
1206
- .ts-dropdown li {
1207
- width: 100%;
1208
- opacity: 0.9;
1023
+ font-size: 8px;
1024
+ width: 15px;
1025
+ height: 15px;
1026
+ border-radius: 50%;
1027
+ display: flex;
1028
+ justify-content: center;
1029
+ align-items: center;
1209
1030
  cursor: pointer;
1210
- font-weight: 550;
1211
- padding: 2px 3px;
1212
- font-size: 12.8px;
1213
- transition: background-color 150ms;
1214
- }
1215
- .ts-dropdown li:hover,
1216
- .ts-dropdown li:focus-within,
1217
- .ts-dropdown li:focus {
1218
- opacity: 1;
1219
- background-color: #555;
1031
+ opacity: 0.9;
1032
+ transition: all 300ms;
1220
1033
  color: #fff;
1034
+ font-weight: 900;
1221
1035
  }
1222
- .ts-dropdown.visible {
1223
- visibility: visible;
1036
+ .files-counter:hover {
1224
1037
  opacity: 1;
1225
1038
  }
1226
- .tg-btn {
1227
- width: auto;
1039
+ .files-counter-2 {
1040
+ transform: translate(-15px, 28px);
1041
+ opacity: 0.9;
1042
+ position: absolute;
1228
1043
  display: flex;
1229
1044
  justify-content: center;
1230
1045
  align-items: center;
1046
+ color: #888;
1047
+ font-size: 12.8px;
1231
1048
  }
1232
- .tg-btn button {
1233
- border: unset;
1234
- display: block;
1235
- min-width: 180px;
1236
- height: 35px;
1237
- padding: 0 10px;
1238
- font-weight: 500;
1239
- background-color: #007bff;
1240
- color: #fff;
1241
- transition: transform 300ms ease-in-out;
1242
- user-select: none;
1243
- cursor: pointer;
1244
- box-shadow: inset 0 -2px rgba(0, 0, 0, 0.2);
1245
- opacity: 0.9;
1246
- border-radius: 2.5px;
1247
- }
1248
- .tg-btn button > svg {
1249
- margin-right: 5px;
1250
- color: #003166;
1049
+ .files-counter-2 svg {
1050
+ margin-left: 5px;
1251
1051
  }
1252
- .tg-btn button:hover {
1052
+ .files-counter-2:hover {
1253
1053
  opacity: 1;
1054
+ text-decoration: underline;
1254
1055
  }
1255
- .tg-btn button:active {
1256
- opacity: 1;
1257
- box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
1258
- -webkit-transform: translateY(1px);
1259
- -moz-transform: translateY(1px);
1260
- -o-transform: translateY(1px);
1261
- -ms-transform: translateY(1px);
1262
- transform: translateY(1px);
1056
+
1057
+
1058
+ .single-file-preview .close-icon {
1059
+ color: #E74C3C;
1060
+ cursor: pointer;
1061
+ opacity: .9;
1062
+ transition: opacity 300ms;
1063
+ }
1064
+ .single-file-preview .close-icon:hover {
1065
+ opacity: 1;
1066
+ }
1067
+ .text-footer-invalid-format {
1068
+ color: #222;
1069
+ padding: 10px;
1070
+ }
1071
+ .text-footer-invalid-format h3 {
1072
+ font-weight: 500;
1073
+ }
1074
+ .text-footer-invalid-format h4 {
1075
+ font-size: 14.4px;
1076
+ }
1077
+ .text-footer-preview-title {
1078
+ font-size: 16px;
1079
+ padding: 10px 0 0 10px;
1080
+ white-space: nowrap;
1081
+ overflow: hidden;
1082
+ text-overflow: ellipsis;
1083
+ }
1084
+ .text-footer-image-preview {
1085
+ display: flex;
1086
+ justify-content: center;
1087
+ align-items: center;
1088
+ width: 100%;
1089
+ }
1090
+ .text-footer-image-preview img {
1091
+ cursor: pointer;
1092
+ max-width: 98%;
1093
+ max-height: 98%;
1094
+ padding: 2%;
1095
+ }
1096
+
1097
+
1098
+ .multiple-file-preview {
1099
+ position: relative;
1100
+ display: flex;
1101
+ flex-direction: column;
1102
+ width: 100%;
1103
+ height: 100%;
1104
+ max-height: 100%;
1105
+ overflow-y: auto;
1106
+ overflow-x: hidden;
1107
+ border-top-left-radius: 2.5px;
1108
+ border-top-right-radius: 2.5px;
1109
+ transition: background-color 150ms;
1110
+ scrollbar-color: #888 rgba(0, 0, 0, 0.2);
1111
+ scrollbar-width: 4px;
1112
+ }
1113
+ .multiple-file-preview::-webkit-scrollbar{
1114
+ width: 4px;
1115
+ }
1116
+
1117
+ .multiple-file-preview .close-icon {
1118
+ color: #E74C3C;
1119
+ cursor: pointer;
1120
+ opacity: .9;
1121
+ transition: opacity 300ms;
1122
+ }
1123
+ .multiple-file-preview .close-icon:hover {
1124
+ opacity: 1;
1125
+ }
1126
+
1127
+ .multiple-file-preview::-webkit-scrollbar-track{
1128
+ background-color: rgba(0, 0, 0, 0.2);
1129
+ }
1130
+
1131
+ .multiple-file-preview::-webkit-scrollbar-thumb{
1132
+ transition-duration: .5s;
1133
+ background-color: #222
1134
+ }
1135
+
1136
+ .multiple-file-preview::-webkit-scrollbar-thumb:hover{
1137
+ background-color: #555
1138
+ }
1139
+
1140
+ .text-footer-invalid-format {
1141
+ color: #222;
1142
+ padding: 10px;
1143
+ }
1144
+ .text-footer-invalid-format h3 {
1145
+ text-overflow: ellipsis;
1146
+ overflow: hidden;
1147
+ font-weight: 500;
1148
+ }
1149
+ .text-footer-invalid-format h4 {
1150
+ text-overflow: ellipsis;
1151
+ overflow: hidden;
1152
+ font-size: 14.4px;
1153
+ }
1154
+
1155
+ .text-footer-exclude-file {
1156
+ position: absolute;
1157
+ top: 5px;
1158
+ right: 5px;
1159
+ cursor: pointer;
1160
+ display: flex;
1161
+ justify-content: center;
1162
+ align-items: center;
1163
+ min-width: 16px;
1164
+ min-height: 16px;
1165
+ background-color: #FFF;
1166
+ border-radius: 50%;
1167
+ }
1168
+ .text-footer-exclude-file svg {
1169
+ transition: color 200ms;
1170
+ color: #e9594a;
1171
+ }
1172
+ .text-footer-exclude-file svg:hover {
1173
+ color: #E74C3C;
1174
+ }
1175
+
1176
+ .file-preview {
1177
+ display: flex;
1178
+ width: 100%;
1179
+ align-items: center;
1180
+ padding: 5px 10px;
1181
+ transition: background-color 150ms;
1182
+ }
1183
+ .file-preview:hover {
1184
+ background-color: rgba(0, 0, 0, .1)
1185
+ }
1186
+
1187
+ .file-title {
1188
+ color: #222;
1189
+ display: flex;
1190
+ align-items: center;
1191
+ white-space: nowrap;
1192
+ text-overflow: ellipsis;
1193
+ overflow: hidden;
1194
+ padding: 4px 10px;
1195
+ background-color: #FFF;
1196
+ border-radius: 30px;
1197
+ display: inline-block;
1198
+ }
1199
+ .file-title.red {
1200
+ color: #E74C3C;
1201
+ margin-right: 5px;
1202
+ }
1203
+ .file-title > svg {
1204
+ margin-right: 5px;
1205
+ color: #333;
1206
+ }
1207
+
1208
+ .small-img {
1209
+ flex: 1;
1210
+ margin: 0 15px;
1211
+ display: flex;
1212
+ justify-content: center;
1213
+ align-items: center;
1214
+ position: relative;
1215
+ }
1216
+ .small-img img {
1217
+ height: 40px;
1218
+ cursor: pointer;
1219
+ }
1220
+ .small-img .pdf, .small-img .doc {
1221
+ display: flex;
1222
+ justify-content: center;
1223
+ align-items: center;
1224
+ font-size: 30px;
1225
+ }
1226
+ .small-img .pdf {
1227
+ color: #E74C3C;
1228
+ }
1229
+ .small-img .doc {
1230
+ color: #006bc9;
1231
+ }
1232
+ .small-img .pdf svg, .small-img .doc svg{
1233
+ z-index: 1;
1234
+ }
1235
+ .small-img .pdf::after, .small-img .doc::after {
1236
+ content: "";
1237
+ position: absolute;
1238
+ bottom: 2px;
1239
+ transform: translateY(2px);
1240
+ width: 20px;
1241
+ height: 20px;
1242
+ background-color: #FFF;
1243
+ }
1244
+ .img-container {
1245
+ padding: 5px;
1246
+ border-radius: 2.5px;
1247
+ background-color: rgba(0, 0, 0, .15);
1248
+ display: flex;
1249
+ justify-content: center;
1250
+ align-items: center;
1251
+ }
1252
+
1253
+ .delete-file {
1254
+ display: flex;
1255
+ justify-content: center;
1256
+ align-items: center;
1257
+ cursor: pointer;
1258
+ }
1259
+ .delete-file > svg {
1260
+ font-size: 16px;
1261
+ color: #E74C3C;
1262
+ }
1263
+
1264
+
1265
+ .transition-selects {
1266
+ min-height: 80px;display: flex; flex-direction: column; width: 100%;
1263
1267
  }
1264
- .tg-btn button:active {
1265
- opacity: 1;
1266
- box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
1267
- -webkit-transform: translateY(1px);
1268
- -moz-transform: translateY(1px);
1269
- -o-transform: translateY(1px);
1270
- -ms-transform: translateY(1px);
1271
- transform: translateY(1px);
1268
+ .loader-select {
1269
+ position: relative; min-height: 35px;background: #FFF;width: 100%; border: 1px solid #ccc;border-radius: 5px;z-index: 1;
1272
1270
  }
1273
- .tg-btn button:focus,
1274
- .tg-btn button:active {
1275
- outline: 2px solid black;
1271
+ .loading-message {
1272
+ background-color: #555!important;
1276
1273
  }
1277
- .tg-btn.small-btn {
1278
- width: auto;
1279
- margin: 0 5px;
1274
+
1275
+
1276
+ .text-footer-actions--btn {
1277
+ position: relative;
1280
1278
  }
1281
- .tg-btn.small-btn svg {
1282
- margin-right: 0;
1279
+ .text-footer-actions--btn > svg:nth-child(1) {
1280
+ font-size: 19.2px;
1283
1281
  }
1284
- .tg-btn.small-btn button {
1285
- min-width: 35px;
1286
- width: 35px;
1287
- padding: 0;
1288
- display: flex;
1289
- justify-content: center;
1290
- align-items: center;
1282
+ .text-footer-actions--btn > svg:nth-child(2) {
1283
+ font-size: 9.6px;
1284
+ position: absolute;
1285
+ transform: translateY(-2px);
1291
1286
  }
1287
+
1292
1288
 
1293
- .tm-container {
1294
- border: 1px solid var(--border-color);
1295
- border-radius: 5px;
1289
+ .multiplos {
1296
1290
  display: flex;
1297
1291
  }
1292
+ .multiplos svg {
1293
+ font-size: 15.2px;
1294
+ }
1295
+ .multiplos svg.small {
1296
+ font-size: 11.2px !important;
1297
+ }
1298
1298
 
1299
1299
 
1300
1300
  .sc-icone-fechar.sc-icone-fechar--externo {
@@ -1425,109 +1425,6 @@
1425
1425
  }
1426
1426
 
1427
1427
 
1428
- .fade-enter-active, .fade-leave-active {
1429
- transition: opacity .5s;
1430
- }
1431
- .fade-enter, .fade-leave-to {
1432
- opacity: 0;
1433
- }
1434
-
1435
-
1436
- .file-item {
1437
- width: 100%;
1438
- height: 100%;
1439
- display: flex;
1440
- justify-content: center;
1441
- align-items: center;
1442
- position: relative;
1443
- }
1444
- .file-item-transition {
1445
- max-width: 100%;
1446
- max-height: 100%;
1447
- display: flex;
1448
- justify-content: center;
1449
- align-items: center;
1450
- position: relative;
1451
- }
1452
- .file-item .req-loader {
1453
- position: absolute;
1454
- top: calc(50% - 12.5px);
1455
- right: calc(50% - 12.5px);
1456
- }
1457
- .file-item-transition img {
1458
- max-width: 45px;
1459
- max-height: 45px;
1460
- }
1461
- .file-item a {
1462
- margin-left: 5px;
1463
- text-decoration: none;
1464
- color: #333;
1465
- }
1466
-
1467
- .file-icon {
1468
- display: flex;
1469
- justify-content: center;
1470
- align-items: center;
1471
- font-size: 30px;
1472
- cursor: pointer;
1473
- }
1474
- .file-icon:hover {
1475
- opacity: 1
1476
- }
1477
- .file-icon:visited {
1478
- color: inherit;
1479
- }
1480
- svg {
1481
- font-size: 30px;
1482
- z-index: 1;
1483
- }
1484
- .file-icon.pdf {
1485
- position: relative;
1486
- }
1487
- .file-icon.pdf svg {
1488
- color: rgb(231, 76, 60);
1489
- }
1490
- .file-icon.pdf::after {
1491
- content: "";
1492
- position: absolute;
1493
- bottom: 2px;
1494
- transform: translateY(2px);
1495
- width: 20px;
1496
- height: 20px;
1497
- background-color: #FFF;
1498
- }
1499
- .file-icon.doc {
1500
- color: #15517F;
1501
- }
1502
- .file-icon.doc::after {
1503
- content: "";
1504
- position: absolute;
1505
- width: 20px;
1506
- height: 20px;
1507
- background-color: #FFF;
1508
- }
1509
- .file-img {
1510
- display: flex;
1511
- justify-content: center;
1512
- align-items: center;
1513
- width: 100%;
1514
- height: 100%;
1515
- overflow: hidden;
1516
- background-color: rgba(0, 0, 0, .2);
1517
- border-radius: 2.5px;
1518
- cursor: pointer;
1519
- opacity: .9;
1520
- transition: opacity 150ms;
1521
- }
1522
-
1523
- .file-img:hover {
1524
- opacity: 1;
1525
- }
1526
- .file-img img {
1527
- width: 95%;
1528
- }
1529
-
1530
-
1531
1428
  .fade-enter-active,
1532
1429
  .fade-leave-active {
1533
1430
  transition: opacity 200ms;
@@ -1744,52 +1641,107 @@ svg {
1744
1641
  color: #666;
1745
1642
  }
1746
1643
 
1644
+
1645
+ .fade-enter-active, .fade-leave-active {
1646
+ transition: opacity .5s;
1647
+ }
1648
+ .fade-enter, .fade-leave-to {
1649
+ opacity: 0;
1650
+ }
1747
1651
 
1748
- .box-shadow {
1749
- -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
1750
- -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
1751
- box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
1752
- }
1753
-
1754
- .interatividade-popup {
1755
- position: absolute;
1756
- top: 15px;
1757
- right: 0;
1758
- width: 250px;
1759
- height: auto;
1760
- max-height: 300px;
1761
- overflow-y: auto;
1762
- overflow-x: hidden;
1763
- background-color: #FFF;
1764
- border-radius: 15px;
1765
- color: #333;
1766
- font-size: 14px;
1767
- }
1652
+ .file-item {
1653
+ width: 100%;
1654
+ height: 100%;
1655
+ display: flex;
1656
+ justify-content: center;
1657
+ align-items: center;
1658
+ position: relative;
1659
+ }
1660
+ .file-item-transition {
1661
+ max-width: 100%;
1662
+ max-height: 100%;
1663
+ display: flex;
1664
+ justify-content: center;
1665
+ align-items: center;
1666
+ position: relative;
1667
+ }
1668
+ .file-item .req-loader {
1669
+ position: absolute;
1670
+ top: calc(50% - 12.5px);
1671
+ right: calc(50% - 12.5px);
1672
+ }
1673
+ .file-item-transition img {
1674
+ max-width: 45px;
1675
+ max-height: 45px;
1676
+ }
1677
+ .file-item a {
1678
+ margin-left: 5px;
1679
+ text-decoration: none;
1680
+ color: #333;
1681
+ }
1768
1682
 
1769
- .interatividade-popup-titulo h1 {
1770
- padding: 4px 10px;
1771
- background-color: #333;
1772
- color: #FFF;
1773
- font-size: 1.2em;
1774
- display: flex;
1775
- justify-content: space-between;
1776
- align-items: center;
1777
- }
1778
- .interatividade-popup-titulo h1 svg{
1779
- color: #E74C3C;
1780
- cursor: pointer;
1781
- font-size: .9em;
1782
- }
1783
-
1784
- .interatividade-popup-item {
1785
- padding: 10px;
1786
- border-bottom: 1px solid #D7D7D7;
1787
- }
1683
+ .file-icon {
1684
+ display: flex;
1685
+ justify-content: center;
1686
+ align-items: center;
1687
+ font-size: 30px;
1688
+ cursor: pointer;
1689
+ }
1690
+ .file-icon:hover {
1691
+ opacity: 1
1692
+ }
1693
+ .file-icon:visited {
1694
+ color: inherit;
1695
+ }
1696
+ svg {
1697
+ font-size: 30px;
1698
+ z-index: 1;
1699
+ }
1700
+ .file-icon.pdf {
1701
+ position: relative;
1702
+ }
1703
+ .file-icon.pdf svg {
1704
+ color: rgb(231, 76, 60);
1705
+ }
1706
+ .file-icon.pdf::after {
1707
+ content: "";
1708
+ position: absolute;
1709
+ bottom: 2px;
1710
+ transform: translateY(2px);
1711
+ width: 20px;
1712
+ height: 20px;
1713
+ background-color: #FFF;
1714
+ }
1715
+ .file-icon.doc {
1716
+ color: #15517F;
1717
+ }
1718
+ .file-icon.doc::after {
1719
+ content: "";
1720
+ position: absolute;
1721
+ width: 20px;
1722
+ height: 20px;
1723
+ background-color: #FFF;
1724
+ }
1725
+ .file-img {
1726
+ display: flex;
1727
+ justify-content: center;
1728
+ align-items: center;
1729
+ width: 100%;
1730
+ height: 100%;
1731
+ overflow: hidden;
1732
+ background-color: rgba(0, 0, 0, .2);
1733
+ border-radius: 2.5px;
1734
+ cursor: pointer;
1735
+ opacity: .9;
1736
+ transition: opacity 150ms;
1737
+ }
1788
1738
 
1789
- .interatividade-popup-item-desc {
1790
- font-size: .9em;
1791
- color: #767676;
1792
- }
1739
+ .file-img:hover {
1740
+ opacity: 1;
1741
+ }
1742
+ .file-img img {
1743
+ width: 95%;
1744
+ }
1793
1745
 
1794
1746
 
1795
1747
  .divisor-form-info-aditional {
@@ -1942,13 +1894,52 @@ svg {
1942
1894
  margin-right: 5px;
1943
1895
  }
1944
1896
 
1945
-
1946
- .fade-enter-active, .fade-leave-active {
1947
- transition: opacity .5s;
1948
- }
1949
- .fade-enter, .fade-leave-to {
1950
- opacity: 0;
1951
- }
1897
+
1898
+ .box-shadow {
1899
+ -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
1900
+ -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
1901
+ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
1902
+ }
1903
+
1904
+ .interatividade-popup {
1905
+ position: absolute;
1906
+ top: 15px;
1907
+ right: 0;
1908
+ width: 250px;
1909
+ height: auto;
1910
+ max-height: 300px;
1911
+ overflow-y: auto;
1912
+ overflow-x: hidden;
1913
+ background-color: #FFF;
1914
+ border-radius: 15px;
1915
+ color: #333;
1916
+ font-size: 14px;
1917
+ }
1918
+
1919
+ .interatividade-popup-titulo h1 {
1920
+ padding: 4px 10px;
1921
+ background-color: #333;
1922
+ color: #FFF;
1923
+ font-size: 1.2em;
1924
+ display: flex;
1925
+ justify-content: space-between;
1926
+ align-items: center;
1927
+ }
1928
+ .interatividade-popup-titulo h1 svg{
1929
+ color: #E74C3C;
1930
+ cursor: pointer;
1931
+ font-size: .9em;
1932
+ }
1933
+
1934
+ .interatividade-popup-item {
1935
+ padding: 10px;
1936
+ border-bottom: 1px solid #D7D7D7;
1937
+ }
1938
+
1939
+ .interatividade-popup-item-desc {
1940
+ font-size: .9em;
1941
+ color: #767676;
1942
+ }
1952
1943
 
1953
1944
 
1954
1945
  .fade-enter-active,
@@ -2248,65 +2239,110 @@ svg {
2248
2239
  padding: 0;
2249
2240
  font-size: 0.9em;
2250
2241
  }
2251
-
2252
- .card-interatividade-list hr {
2253
- height: 1px;
2254
- background-color: #ccc;
2255
- width: 100%;
2256
- border: 0;
2242
+
2243
+ .card-interatividade-list hr {
2244
+ height: 1px;
2245
+ background-color: #ccc;
2246
+ width: 100%;
2247
+ border: 0;
2248
+ }
2249
+
2250
+ .card-interatividade-list button {
2251
+ margin-left: 5px;
2252
+ border-radius: 5px;
2253
+ border: unset;
2254
+ cursor: pointer;
2255
+ padding: 5px 10px;
2256
+ background-color: #b5f778;
2257
+ }
2258
+
2259
+ .card-interatividade-list button:hover {
2260
+ text-decoration: underline;
2261
+ }
2262
+
2263
+
2264
+ .fade-enter-active, .fade-leave-active {
2265
+ transition: opacity .5s;
2266
+ }
2267
+ .fade-enter, .fade-leave-to {
2268
+ opacity: 0;
2269
+ }
2270
+
2271
+
2272
+ :root {
2273
+ --message-color: #373737;
2274
+ --text-color: #fff;
2275
+ --files-bg: rgba(255, 255, 255, 0.1);
2276
+ --files-bg-hover: rgba(255, 255, 255, 0.1);
2277
+
2278
+ --light: 80;
2279
+ --threshold: 60;
2280
+ }
2281
+
2282
+ .fade-enter-active,
2283
+ .fade-leave-active {
2284
+ transition: opacity 0.5s;
2285
+ }
2286
+ .fade-enter,
2287
+ .fade-leave-to {
2288
+ opacity: 0;
2257
2289
  }
2258
2290
 
2259
- .card-interatividade-list button {
2260
- margin-left: 5px;
2261
- border-radius: 5px;
2262
- border: unset;
2263
- cursor: pointer;
2291
+ .mensagem-reply {
2264
2292
  padding: 5px 10px;
2265
- background-color: #b5f778;
2293
+ font-size: 12px;
2294
+ color: #666;
2295
+ transition: background-color 150ms ease-in-out;
2296
+ border-radius: 5px;
2297
+ margin: 5px 0;
2298
+ overflow: hidden;
2299
+ max-width: 100%;
2300
+ }
2301
+ .mensagem-reply p {
2302
+ overflow: hidden;
2303
+ text-overflow: ellipsis;
2304
+ white-space: nowrap;
2266
2305
  }
2267
2306
 
2268
- .card-interatividade-list button:hover {
2269
- text-decoration: underline;
2307
+ .message-reply-principal {
2308
+ border-left: 3px solid transparent;
2309
+ background-color: rgba(100, 100, 100, 0.1);
2310
+ }
2311
+ .message-reply-principal:hover {
2312
+ background-color: rgba(100, 100, 100, 0.2);
2270
2313
  }
2271
-
2272
2314
 
2273
- .audio-speed-control {
2274
- display: flex;
2275
- align-items: center;
2276
- cursor: pointer;
2277
- margin-left: 10px;
2315
+ .message-reply-outros {
2316
+ background-color: rgb(245, 245, 245);
2317
+ border-left: 3px solid var(--message-color);
2318
+ }
2319
+ .message-reply-outros:hover {
2320
+ background-color: rgb(235, 235, 235);
2278
2321
  }
2279
2322
 
2280
- .speed-circle {
2281
- width: 40px;
2282
- height: 40px;
2283
- background-color: #f1f3f4; /* Cor do círculo */
2284
- border: solid black 1px;
2285
- color: black;
2323
+ .mensagem-reply-vazia {
2286
2324
  display: flex;
2287
- justify-content: center;
2288
2325
  align-items: center;
2289
- border-radius: 50%;
2290
- font-weight: bold;
2291
- transition: background-color 0.3s;
2292
2326
  }
2293
-
2294
- .speed-circle.active {
2295
- background-color: #f1f3f4; /* Cor quando ativo */
2296
- border: solid blue 1px;
2297
-
2327
+ .mensagem-reply-vazia svg {
2328
+ margin-right: 5px;
2329
+ color: #ba181b;
2298
2330
  }
2299
-
2300
2331
 
2301
- .tippy-tooltip.light-theme .tippy-backdrop {
2302
- background-color: #fff;
2303
- }
2332
+ .mensagem {
2333
+ padding: 20px 7px 14px 7px;
2334
+ border-radius: 5px;
2335
+ min-width: 150px;
2336
+ min-height: 60px;
2337
+ width: -webkit-fit-content;
2338
+ width: -moz-fit-content;
2339
+ width: fit-content;
2340
+ position: relative;
2341
+ max-width: 80%;
2342
+ margin-bottom: 10px;
2343
+ font-size: 12px;
2344
+ word-break: break-word;
2304
2345
 
2305
- .tippy-tooltip.light-theme {
2306
- /* .tippy-box[data-theme~='light'] { */
2307
- background-color: #fff;
2308
- border: 1px solid #ccc;
2309
- color: #333;
2310
2346
  -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
2311
2347
  0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
2312
2348
  -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
@@ -2314,824 +2350,780 @@ svg {
2314
2350
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
2315
2351
  0px 1px 5px 0px rgba(0, 0, 0, 0.12);
2316
2352
  }
2353
+ .mensagem.max-w-60 {
2354
+ max-width: 60%;
2355
+ }
2356
+ .mensagem.mapa {
2357
+ width: 100%;
2358
+ }
2359
+ .mensagem.hist-msg {
2360
+ animation: show 1s;
2361
+ }
2362
+ .mensagem a {
2363
+ margin-right: 5px;
2364
+ font-weight: 550;
2365
+ color: inherit;
2366
+ text-decoration: none;
2367
+ }
2368
+ .mensagem a:hover {
2369
+ text-decoration: underline;
2370
+ }
2371
+ .message p {
2372
+ white-space: pre-wrap;
2373
+ }
2374
+ .mensagem:hover .menu-primario {
2375
+ visibility: visible;
2376
+ opacity: 1;
2377
+ }
2317
2378
 
2318
- .tippy-confirmation p {
2319
- margin-bottom: 3px;
2379
+ .mensagem-anexo a,
2380
+ .mensagem-div-mapa a {
2381
+ white-space: nowrap;
2382
+ text-overflow: ellipsis;
2383
+ overflow: hidden;
2320
2384
  }
2321
2385
 
2322
- .tippy-confirmation button {
2323
- border: unset;
2324
- background-color: #f1f1f1;
2325
- border-radius: 3px;
2326
- padding: 5px 8px;
2386
+ .reply {
2327
2387
  cursor: pointer;
2328
- font-size: 12px;
2388
+ position: absolute;
2389
+ right: 53px;
2390
+ bottom: 5px;
2391
+ font-size: 9.6px;
2392
+ color: #67a332;
2393
+ width: 14.4px;
2394
+ height: 14.4px;
2395
+ display: flex;
2396
+ justify-content: center;
2397
+ align-items: center;
2398
+ border-radius: 50%;
2399
+ background-color: #fff;
2329
2400
  }
2330
-
2331
- .tippy-confirmation button.cancel {
2332
- border-bottom: 2px solid red;
2333
- margin-right: 15px;
2401
+ .reply svg {
2402
+ margin-top: -1px;
2403
+ margin-right: -1px;
2334
2404
  }
2335
-
2336
- .tippy-confirmation button.confirm {
2337
- border-bottom: 2px solid green;
2405
+ .reply-with-2-icons {
2406
+ right: 30px;
2338
2407
  }
2339
-
2340
2408
 
2341
- .mensagem__principal .default-doc {
2342
- background-color: var(--files-bg);
2409
+ .check {
2410
+ cursor: pointer;
2411
+ position: absolute;
2412
+ right: 10px;
2413
+ bottom: 2px;
2414
+ font-size: 11.2px;
2343
2415
  }
2344
-
2345
- .mensagem__principal .default-doc:hover {
2346
- background-color: var(--files-bg-hover);
2416
+ .check.visualizado,
2417
+ .check.visualizado svg {
2418
+ color: #006daa;
2347
2419
  }
2348
-
2349
- .mensagem__outros .default-doc {
2350
- background-color: rgba(100, 100, 100, 0.1);
2420
+ .check.verde,
2421
+ .check.verde svg {
2422
+ color: #4f772d;
2351
2423
  }
2352
-
2353
- .mensagem__outros .default-doc:hover {
2354
- background-color: rgba(100, 100, 100, 0.3);
2424
+ .check.vermelho,
2425
+ .check.vermelho svg {
2426
+ color: #ba181b;
2355
2427
  }
2356
-
2357
- .default-doc:hover p {
2358
- text-decoration: underline;
2428
+ .check.cinza,
2429
+ .check.cinza svg {
2430
+ color: #999;
2359
2431
  }
2360
-
2361
- .default-doc {
2362
- display: flex;
2363
- align-items: center;
2364
- padding: 10px;
2365
- border-radius: 5px;
2366
- width: 100%;
2367
- max-width: 100%;
2432
+ .check.preto,
2433
+ .check.preto svg {
2434
+ color: #666;
2435
+ }
2436
+ .star {
2368
2437
  cursor: pointer;
2369
- transition: background-color 150ms ease-in-out;
2438
+ position: absolute;
2439
+ right: 30px;
2440
+ bottom: 2px;
2441
+ font-size: 6.4px;
2442
+ width: 11.2px;
2370
2443
  }
2371
-
2372
- .default-doc svg {
2373
- font-size: 19.2px;
2374
- margin-right: 5px;
2444
+ .default-stick-size {
2445
+ width: 180px;
2446
+ height: auto;
2447
+ }
2448
+ .horario-envio {
2449
+ margin-right: 15px;
2450
+ font-size: 11.2px;
2451
+ position: absolute;
2452
+ left: 10px;
2453
+ bottom: 2px;
2375
2454
  }
2376
2455
 
2377
- .default-doc p {
2378
- overflow: hidden;
2379
- text-overflow: ellipsis;
2456
+ .autor-mensagem {
2457
+ position: absolute;
2458
+ font-size: 9.6px;
2380
2459
  white-space: nowrap;
2460
+ text-overflow: ellipsis;
2461
+ overflow: hidden;
2462
+ max-width: 90%;
2463
+ font-weight: bold;
2464
+ top: 2px;
2381
2465
  }
2382
2466
 
2383
- .file-actions {
2467
+ .menu-primario {
2468
+ visibility: hidden;
2469
+ opacity: 0;
2470
+ transition: opacity 150ms ease-in-out;
2471
+ position: absolute;
2472
+ font-size: 11.2px;
2473
+ top: 3px;
2384
2474
  display: flex;
2385
- justify-content: flex-end;
2386
- width: 100%;
2387
- padding: 5px;
2388
- }
2389
-
2390
- .file-actions a {
2391
- margin-right: 0;
2392
- }
2393
-
2394
- .mensagem__principal .file-action-button {
2395
- background-color: var(--files-bg);
2475
+ gap: 5px;
2476
+ padding: 2px 4px;
2396
2477
  }
2397
-
2398
- .mensagem__outros .file-action-button {
2399
- background-color: rgba(100, 100, 100, 0.1);
2478
+ .menu-primario.principal {
2479
+ left: 4px;
2480
+ color: var(--text-color);
2481
+ background-color: var(--message-color);
2400
2482
  }
2401
-
2402
- .mensagem__principal .file-action-button:hover {
2403
- background-color: var(--files-bg-hover);
2483
+ .menu-primario.outros {
2484
+ right: 4px;
2485
+ color: var(--text-color);
2486
+ background-color: #fff;
2404
2487
  }
2405
2488
 
2406
- .mensagem__outros .file-action-button:hover {
2407
- background-color: rgba(100, 100, 100, 0.3);
2489
+ .menu-primario.outros > span:nth-child(1) {
2490
+ order: 10;
2408
2491
  }
2409
2492
 
2410
- .file-action-button {
2411
- display: flex;
2412
- justify-content: center;
2413
- align-items: center;
2414
- margin-left: 12px;
2493
+ .menu-mensagem {
2415
2494
  cursor: pointer;
2416
- padding: 5px;
2417
- border-radius: 5px;
2418
- transition: background-color 150ms ease-in-out;
2495
+ padding: 1px;
2419
2496
  }
2420
2497
 
2421
- .file-action-button a {
2498
+ .menu-flutuante {
2499
+ background-color: #fff;
2500
+ -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
2501
+ 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
2502
+ -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
2503
+ 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
2504
+ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
2505
+ 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
2506
+ border-radius: 10px;
2507
+ position: absolute;
2508
+ top: 20px;
2509
+ width: 120px;
2510
+ min-height: 50px;
2511
+ height: 50px;
2512
+ max-height: 50px;
2513
+ overflow-x: hidden;
2514
+ overflow-y: auto;
2422
2515
  margin: 0;
2516
+ padding: 0;
2517
+ display: flex;
2518
+ flex-direction: column;
2519
+ z-index: 1;
2423
2520
  }
2424
2521
 
2425
- .fade-enter-active,
2426
- .fade-leave-active {
2427
- transition: opacity 0.5s;
2522
+ .menu-flutuante.principal {
2523
+ left: 3px;
2428
2524
  }
2429
2525
 
2430
- .fade-enter,
2431
- .fade-leave-to {
2432
- opacity: 0;
2526
+ .menu-flutuante.outros {
2527
+ right: 3px;
2433
2528
  }
2434
2529
 
2435
- .mensagem-div-anexo {
2530
+ .menu-flutuante li {
2531
+ transition: background-color 300ms ease-in-out;
2436
2532
  width: 100%;
2533
+ cursor: pointer;
2534
+ padding: 5px 10px;
2437
2535
  display: flex;
2438
- justify-content: center;
2439
2536
  align-items: center;
2440
- flex-direction: column;
2441
- overflow: hidden;
2442
2537
  }
2443
2538
 
2444
- .anexo-container {
2445
- width: 100%;
2446
- margin-top: 5px;
2447
- overflow: hidden;
2448
- display: flex;
2449
- max-height: 300px;
2539
+ .menu-flutuante li:hover {
2540
+ background-color: #e9e9e9;
2450
2541
  }
2451
2542
 
2452
- .anexo-container a,
2453
- .anexo-container .arquivo-erro {
2454
- padding: 10px 15px 15px 15px;
2543
+ /* Principal */
2544
+ .mensagem__principal {
2545
+ width: 100%;
2455
2546
  display: flex;
2456
- justify-content: center;
2457
- align-items: center;
2547
+ justify-content: flex-end;
2458
2548
  }
2459
-
2460
- .anexo-container p {
2461
- text-overflow: ellipsis;
2462
- overflow: hidden;
2549
+ .mensagem__principal > .mensagem::after {
2550
+ content: "";
2551
+ width: 0;
2552
+ height: 0;
2553
+ position: absolute;
2554
+ border-left: 10px solid transparent;
2555
+ border-right: 10px solid transparent;
2556
+ border-top: 10px solid var(--message-color);
2557
+ bottom: 5px;
2558
+ right: -10px;
2559
+ transform: rotate(-90deg);
2463
2560
  }
2464
-
2465
- .anexo-container p,
2466
- .anexo-container .arquivo-erro {
2467
- margin: 0;
2468
- margin-left: 15px;
2469
- font-size: 14.4px;
2561
+ .mensagem__principal > .mensagem {
2562
+ background-color: var(--message-color);
2563
+ color: var(--text-color);
2470
2564
  }
2471
2565
 
2472
- .anexo-container svg {
2473
- font-size: 32px;
2566
+ .mensagem__principal > .mensagem .horario-envio {
2567
+ color: var(--text-color);
2474
2568
  }
2475
-
2476
- .anexo-mensagem audio .divAudioPai {
2477
- outline: none;
2569
+ .mensagem__principal > .mensagem .autor-mensagem {
2570
+ right: 5px;
2571
+ color: var(--text-color);
2572
+ }
2573
+ /* Outros */
2574
+ .mensagem__outros {
2478
2575
  width: 100%;
2479
- margin-bottom: 5px;
2576
+ display: flex;
2480
2577
  }
2481
- .audioStyle {
2482
- width: 370px;
2578
+ .mensagem__outros > .mensagem {
2579
+ background-color: #fff;
2580
+ color: #333;
2483
2581
  }
2484
-
2485
- .divAudioPai {
2486
- display: flex;
2487
- /* justify-content: space-between; */
2488
- background-color: #f1f3f4;
2489
- border-radius: 50%;
2490
- width: 100%;
2491
- border-bottom-right-radius: 26px;
2492
- border-top-right-radius: 26px;
2582
+ .mensagem__outros > .mensagem::after {
2583
+ content: "";
2584
+ width: 0;
2585
+ height: 0;
2586
+ position: absolute;
2587
+ border-left: 10px solid transparent;
2588
+ border-right: 10px solid transparent;
2589
+ border-top: 10px solid #fff;
2590
+ bottom: 5px;
2591
+ left: -10px;
2592
+ transform: rotate(90deg);
2493
2593
  }
2494
-
2495
- .anexo-mensagem video {
2496
- flex: 1;
2497
- width: 100%;
2498
- max-width: 350px;
2499
- cursor: pointer;
2500
- margin-bottom: 5px;
2594
+ /* .mensagem__outros .check{
2595
+ display: none
2596
+ } */
2597
+ .mensagem__outros > .autor-mensagem {
2598
+ left: 5px;
2599
+ color: #333;
2501
2600
  }
2502
-
2503
- .anexos-links-container {
2601
+ /* Mapa */
2602
+ .mensagem-div-mapa {
2504
2603
  width: 100%;
2505
2604
  display: flex;
2506
2605
  justify-content: center;
2507
2606
  align-items: center;
2607
+ flex-direction: column;
2608
+ margin-bottom: 5px;
2508
2609
  }
2509
2610
 
2510
- .anexos-links-container a {
2511
- white-space: nowrap;
2512
- text-overflow: ellipsis;
2513
- overflow: hidden;
2514
- margin-right: 5px;
2515
- font-weight: 550;
2516
- color: inherit;
2517
- text-decoration: none;
2611
+ .msg-mapa {
2612
+ width: 100%;
2613
+ min-height: 225px;
2614
+ height: 100%;
2615
+ box-sizing: initial;
2518
2616
  }
2519
-
2520
- .anexos-links-container svg {
2521
- cursor: pointer;
2617
+ .msg-mapa img {
2618
+ max-width: none !important;
2522
2619
  }
2523
2620
 
2524
- .mensagem-div-anexo img {
2525
- cursor: pointer;
2526
- margin: 10px 0;
2527
- min-width: 35px;
2528
- width: 100%;
2529
- max-width: 250px;
2621
+ .info-mapa {
2622
+ list-style-type: none;
2530
2623
  }
2531
-
2532
- .anexo-transition {
2533
- width: 100%;
2534
- height: 100%;
2624
+ .info-mapa li.title {
2625
+ font-size: 0.85em;
2626
+ }
2627
+ .info-mapa li.address,
2628
+ .info-mapa li.url {
2629
+ font-size: 0.85em;
2630
+ }
2631
+ .info-mapa li.url {
2632
+ font-size: 0.85em;
2535
2633
  }
2536
2634
 
2537
- .anexo-mensagem {
2635
+ .tooltip-list {
2636
+ margin: 0;
2637
+ padding: 0;
2538
2638
  display: flex;
2539
- justify-content: center;
2540
- align-items: center;
2541
2639
  flex-direction: column;
2542
- width: 100%;
2640
+ justify-content: center;
2641
+ align-items: flex-start;
2543
2642
  }
2544
2643
 
2545
- .alert-danger {
2546
- color: #721c24;
2547
- background-color: #f8d7da;
2548
- border-color: #f5c6cb;
2644
+ .emoji-message-container {
2645
+ position: absolute;
2646
+ top: 0;
2647
+ z-index: 1;
2648
+ width: 300px;
2649
+ height: 250px;
2650
+ }
2651
+ /* .emoji-message-container {
2652
+ z-index: 1;
2653
+ overflow: hidden;
2654
+ width: 300px;
2655
+ height: 250px;
2656
+
2657
+ >.sm-emoji-picker {
2658
+ position: relative;
2659
+ width: 300px;
2660
+ height: 250px;
2661
+ }
2549
2662
  }
2550
2663
 
2551
- .alert {
2552
- position: relative;
2553
- padding: 10.4px 19.2px;
2554
- margin: 5px 0;
2555
- border: 1px solid transparent;
2556
- border-radius: 4px;
2557
- text-align: center;
2664
+ .mensagem .reaction {
2665
+ $size: 1.8em;
2666
+ width: $size;
2667
+ height: $size;
2668
+ min-width: $size;
2669
+ min-height: $size;
2670
+ max-width: $size;
2671
+ max-height: $size;
2672
+ } */
2673
+
2674
+ .emoji-message-container .sm-emoji-picker {
2675
+ width: 300px;
2676
+ height: 250px;
2677
+ }
2678
+ .emoji-message-container .sm-emoji-picker .sm-emoji-header {
2679
+ overflow-x: auto;
2680
+ overflow-y: hidden;
2558
2681
  }
2559
2682
 
2560
- .alert svg {
2561
- font-size: 1.025em;
2562
- margin-right: 2px;
2683
+ .reaction {
2684
+ position: absolute;
2685
+ bottom: 0;
2686
+ border-radius: 50%;
2687
+ display: flex;
2688
+ justify-content: center;
2689
+ align-items: center;
2690
+ background-color: rgba(100, 100, 100, 0.4);
2691
+ padding: 5px;
2692
+ font-size: 1.3em;
2693
+ min-width: 1.8em;
2694
+ min-height: 1.8em;
2695
+ max-width: 1.8em;
2696
+ max-height: 1.8em;
2563
2697
  }
2564
2698
 
2565
- .pdf {
2566
- color: #e74c3c;
2699
+ .reaction > span {
2700
+ display: block;
2701
+ transform: translateY(-1px);
2567
2702
  }
2568
2703
 
2569
- .doc {
2570
- color: #006bc9;
2704
+ .mensagem__outros .reaction {
2705
+ right: -30px;
2706
+ }
2707
+
2708
+ .mensagem__principal .reaction {
2709
+ left: -30px;
2571
2710
  }
2572
2711
 
2573
2712
 
2574
- .interatividade-btn {
2575
- width: 100%;
2576
- display: flex;
2577
- justify-content: center;
2578
- align-items: center;
2713
+ .tippy-tooltip.light-theme .tippy-backdrop {
2579
2714
  background-color: #fff;
2580
- color: #111b21;
2581
- padding: 10px 12px;
2582
- border-radius: 5px;
2583
- margin-bottom: 10px;
2584
- }
2585
- .interatividade-btn:nth-child(1) {
2586
- margin-top: 10px;
2587
- }
2588
- .interatividade-titulo {
2589
- white-space: nowrap;
2590
- text-overflow: ellipsis;
2591
- overflow: hidden;
2592
- max-width: 100%;
2593
- margin: 0;
2594
- padding: 0;
2595
2715
  }
2596
2716
 
2597
- .interatividade-lista {
2598
- width: 100%;
2599
- min-width: 200px;
2600
- border-radius: 15px;
2717
+ .tippy-tooltip.light-theme {
2718
+ /* .tippy-box[data-theme~='light'] { */
2601
2719
  background-color: #fff;
2720
+ border: 1px solid #ccc;
2602
2721
  color: #333;
2603
- margin: 10px 0;
2722
+ -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
2723
+ 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
2724
+ -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
2725
+ 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
2726
+ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
2727
+ 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
2604
2728
  }
2605
2729
 
2606
- .interatividade-lista-conteudo {
2607
- padding: 10px;
2608
- border-bottom: 1px solid #d7d7d7;
2609
- }
2610
- .interatividade-lista-titulo {
2611
- font-weight: bold;
2612
- font-size: 1.2em;
2613
- margin-bottom: 10px;
2614
- }
2615
- .interatividade-lista-rodape {
2616
- color: #818181;
2617
- margin-top: 5px;
2618
- }
2619
- .interatividade-lista-link {
2620
- width: 100%;
2621
- text-align: center;
2622
- padding: 10px;
2623
- color: rgb(0, 110, 255);
2624
- cursor: pointer;
2625
- transition: color 200ms ease-in-out;
2626
- }
2627
- .interatividade-lista-link:hover {
2628
- color: rgb(0, 98, 143);
2730
+ .tippy-confirmation p {
2731
+ margin-bottom: 3px;
2629
2732
  }
2630
-
2631
2733
 
2632
- .link-preview {
2633
- display: flex;
2634
- flex-direction: column;
2635
- background-color: #eee;
2636
- color: #333;
2734
+ .tippy-confirmation button {
2735
+ border: unset;
2736
+ background-color: #f1f1f1;
2737
+ border-radius: 3px;
2738
+ padding: 5px 8px;
2637
2739
  cursor: pointer;
2638
- margin: 5px 0;
2639
- border-radius: 5px;
2640
- opacity: 0.95;
2641
- transition: opacity 300ms ease-in-out;
2642
- font-size: 13.6px;
2740
+ font-size: 12px;
2643
2741
  }
2644
2742
 
2645
- .link-preview-image {
2646
- display: flex;
2647
- justify-content: center;
2648
- align-items: center;
2649
- padding: 1px;
2650
- border-top-left-radius: 5px;
2651
- border-top-right-radius: 5px;
2743
+ .tippy-confirmation button.cancel {
2744
+ border-bottom: 2px solid red;
2745
+ margin-right: 15px;
2652
2746
  }
2653
2747
 
2654
- .link-preview-author {
2655
- margin: 5px;
2656
- font-size: 0.615em;
2657
- font-weight: bold;
2658
- }
2659
- .link-preview-author.mb-0 {
2660
- margin-bottom: 0;
2661
- }
2662
- .link-preview-author h1 {
2663
- overflow: hidden;
2664
- text-overflow: ellipsis;
2665
- white-space: nowrap;
2748
+ .tippy-confirmation button.confirm {
2749
+ border-bottom: 2px solid green;
2666
2750
  }
2667
2751
 
2668
- .link-preview-image img {
2669
- min-width: 100px;
2670
- max-width: 200px;
2671
- border-top-left-radius: 5px;
2672
- border-top-right-radius: 5px;
2752
+ .mensagem__principal .default-doc {
2753
+ background-color: var(--files-bg);
2673
2754
  }
2674
2755
 
2675
- .link-preview-infos {
2676
- background-color: #2626261a;
2677
- padding: 5px;
2678
- margin: 5px;
2679
- font-size: 0.83em;
2680
- border-radius: 5px;
2756
+ .mensagem__principal .default-doc:hover {
2757
+ background-color: var(--files-bg-hover);
2681
2758
  }
2682
2759
 
2683
- .link-preview:hover {
2684
- opacity: 1;
2685
- }
2686
- .link-preview:hover .link-preview-infos p {
2687
- text-decoration: underline;
2760
+ .mensagem__outros .default-doc {
2761
+ background-color: rgba(100, 100, 100, 0.1);
2688
2762
  }
2689
-
2690
-
2691
- :root {
2692
- --message-color: #373737;
2693
- --text-color: #fff;
2694
- --files-bg: rgba(255, 255, 255, 0.1);
2695
- --files-bg-hover: rgba(255, 255, 255, 0.1);
2696
2763
 
2697
- --light: 80;
2698
- --threshold: 60;
2764
+ .mensagem__outros .default-doc:hover {
2765
+ background-color: rgba(100, 100, 100, 0.3);
2699
2766
  }
2700
2767
 
2701
- .fade-enter-active,
2702
- .fade-leave-active {
2703
- transition: opacity 0.5s;
2704
- }
2705
- .fade-enter,
2706
- .fade-leave-to {
2707
- opacity: 0;
2768
+ .default-doc:hover p {
2769
+ text-decoration: underline;
2708
2770
  }
2709
2771
 
2710
- .mensagem-reply {
2711
- padding: 5px 10px;
2712
- font-size: 12px;
2713
- color: #666;
2714
- transition: background-color 150ms ease-in-out;
2772
+ .default-doc {
2773
+ display: flex;
2774
+ align-items: center;
2775
+ padding: 10px;
2715
2776
  border-radius: 5px;
2716
- margin: 5px 0;
2717
- overflow: hidden;
2777
+ width: 100%;
2718
2778
  max-width: 100%;
2779
+ cursor: pointer;
2780
+ transition: background-color 150ms ease-in-out;
2719
2781
  }
2720
- .mensagem-reply p {
2782
+
2783
+ .default-doc svg {
2784
+ font-size: 19.2px;
2785
+ margin-right: 5px;
2786
+ }
2787
+
2788
+ .default-doc p {
2721
2789
  overflow: hidden;
2722
2790
  text-overflow: ellipsis;
2723
2791
  white-space: nowrap;
2724
2792
  }
2725
2793
 
2726
- .message-reply-principal {
2727
- border-left: 3px solid transparent;
2728
- background-color: rgba(100, 100, 100, 0.1);
2729
- }
2730
- .message-reply-principal:hover {
2731
- background-color: rgba(100, 100, 100, 0.2);
2794
+ .file-actions {
2795
+ display: flex;
2796
+ justify-content: flex-end;
2797
+ width: 100%;
2798
+ padding: 5px;
2732
2799
  }
2733
2800
 
2734
- .message-reply-outros {
2735
- background-color: rgb(245, 245, 245);
2736
- border-left: 3px solid var(--message-color);
2737
- }
2738
- .message-reply-outros:hover {
2739
- background-color: rgb(235, 235, 235);
2801
+ .file-actions a {
2802
+ margin-right: 0;
2740
2803
  }
2741
2804
 
2742
- .mensagem-reply-vazia {
2743
- display: flex;
2744
- align-items: center;
2745
- }
2746
- .mensagem-reply-vazia svg {
2747
- margin-right: 5px;
2748
- color: #ba181b;
2805
+ .mensagem__principal .file-action-button {
2806
+ background-color: var(--files-bg);
2749
2807
  }
2750
2808
 
2751
- .mensagem {
2752
- padding: 20px 7px 14px 7px;
2753
- border-radius: 5px;
2754
- min-width: 150px;
2755
- min-height: 60px;
2756
- width: -webkit-fit-content;
2757
- width: -moz-fit-content;
2758
- width: fit-content;
2759
- position: relative;
2760
- max-width: 80%;
2761
- margin-bottom: 10px;
2762
- font-size: 12px;
2763
- word-break: break-word;
2764
-
2765
- -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
2766
- 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
2767
- -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
2768
- 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
2769
- box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
2770
- 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
2771
- }
2772
- .mensagem.max-w-60 {
2773
- max-width: 60%;
2774
- }
2775
- .mensagem.mapa {
2776
- width: 100%;
2809
+ .mensagem__outros .file-action-button {
2810
+ background-color: rgba(100, 100, 100, 0.1);
2777
2811
  }
2778
- .mensagem.hist-msg {
2779
- animation: show 1s;
2812
+
2813
+ .mensagem__principal .file-action-button:hover {
2814
+ background-color: var(--files-bg-hover);
2780
2815
  }
2781
- .mensagem a {
2782
- margin-right: 5px;
2783
- font-weight: 550;
2784
- color: inherit;
2785
- text-decoration: none;
2816
+
2817
+ .mensagem__outros .file-action-button:hover {
2818
+ background-color: rgba(100, 100, 100, 0.3);
2786
2819
  }
2787
- .mensagem a:hover {
2788
- text-decoration: underline;
2820
+
2821
+ .file-action-button {
2822
+ display: flex;
2823
+ justify-content: center;
2824
+ align-items: center;
2825
+ margin-left: 12px;
2826
+ cursor: pointer;
2827
+ padding: 5px;
2828
+ border-radius: 5px;
2829
+ transition: background-color 150ms ease-in-out;
2789
2830
  }
2790
- .message p {
2791
- white-space: pre-wrap;
2831
+
2832
+ .file-action-button a {
2833
+ margin: 0;
2792
2834
  }
2793
- .mensagem:hover .menu-primario {
2794
- visibility: visible;
2795
- opacity: 1;
2835
+
2836
+ .fade-enter-active,
2837
+ .fade-leave-active {
2838
+ transition: opacity 0.5s;
2796
2839
  }
2797
2840
 
2798
- .mensagem-anexo a,
2799
- .mensagem-div-mapa a {
2800
- white-space: nowrap;
2801
- text-overflow: ellipsis;
2802
- overflow: hidden;
2841
+ .fade-enter,
2842
+ .fade-leave-to {
2843
+ opacity: 0;
2803
2844
  }
2804
2845
 
2805
- .reply {
2806
- cursor: pointer;
2807
- position: absolute;
2808
- right: 53px;
2809
- bottom: 5px;
2810
- font-size: 9.6px;
2811
- color: #67a332;
2812
- width: 14.4px;
2813
- height: 14.4px;
2846
+ .mensagem-div-anexo {
2847
+ width: 100%;
2814
2848
  display: flex;
2815
2849
  justify-content: center;
2816
2850
  align-items: center;
2817
- border-radius: 50%;
2818
- background-color: #fff;
2851
+ flex-direction: column;
2852
+ overflow: hidden;
2819
2853
  }
2820
- .reply svg {
2821
- margin-top: -1px;
2822
- margin-right: -1px;
2854
+
2855
+ .anexo-container {
2856
+ width: 100%;
2857
+ margin-top: 5px;
2858
+ overflow: hidden;
2859
+ display: flex;
2860
+ max-height: 300px;
2823
2861
  }
2824
- .reply-with-2-icons {
2825
- right: 30px;
2862
+
2863
+ .anexo-container a,
2864
+ .anexo-container .arquivo-erro {
2865
+ padding: 10px 15px 15px 15px;
2866
+ display: flex;
2867
+ justify-content: center;
2868
+ align-items: center;
2826
2869
  }
2827
2870
 
2828
- .check {
2829
- cursor: pointer;
2830
- position: absolute;
2831
- right: 10px;
2832
- bottom: 2px;
2833
- font-size: 11.2px;
2871
+ .anexo-container p {
2872
+ text-overflow: ellipsis;
2873
+ overflow: hidden;
2834
2874
  }
2835
- .check.visualizado,
2836
- .check.visualizado svg {
2837
- color: #006daa;
2875
+
2876
+ .anexo-container p,
2877
+ .anexo-container .arquivo-erro {
2878
+ margin: 0;
2879
+ margin-left: 15px;
2880
+ font-size: 14.4px;
2838
2881
  }
2839
- .check.verde,
2840
- .check.verde svg {
2841
- color: #4f772d;
2882
+
2883
+ .anexo-container svg {
2884
+ font-size: 32px;
2842
2885
  }
2843
- .check.vermelho,
2844
- .check.vermelho svg {
2845
- color: #ba181b;
2886
+
2887
+ .anexo-mensagem audio .divAudioPai {
2888
+ outline: none;
2889
+ width: 100%;
2890
+ margin-bottom: 5px;
2846
2891
  }
2847
- .check.cinza,
2848
- .check.cinza svg {
2849
- color: #999;
2892
+ .audioStyle {
2893
+ width: 370px;
2850
2894
  }
2851
- .check.preto,
2852
- .check.preto svg {
2853
- color: #666;
2895
+
2896
+ .divAudioPai {
2897
+ display: flex;
2898
+ /* justify-content: space-between; */
2899
+ background-color: #f1f3f4;
2900
+ border-radius: 50%;
2901
+ width: 100%;
2902
+ border-bottom-right-radius: 26px;
2903
+ border-top-right-radius: 26px;
2854
2904
  }
2855
- .star {
2905
+
2906
+ .anexo-mensagem video {
2907
+ flex: 1;
2908
+ width: 100%;
2909
+ max-width: 350px;
2856
2910
  cursor: pointer;
2857
- position: absolute;
2858
- right: 30px;
2859
- bottom: 2px;
2860
- font-size: 6.4px;
2861
- width: 11.2px;
2862
- }
2863
- .default-stick-size {
2864
- width: 180px;
2865
- height: auto;
2911
+ margin-bottom: 5px;
2866
2912
  }
2867
- .horario-envio {
2868
- margin-right: 15px;
2869
- font-size: 11.2px;
2870
- position: absolute;
2871
- left: 10px;
2872
- bottom: 2px;
2913
+
2914
+ .anexos-links-container {
2915
+ width: 100%;
2916
+ display: flex;
2917
+ justify-content: center;
2918
+ align-items: center;
2873
2919
  }
2874
2920
 
2875
- .autor-mensagem {
2876
- position: absolute;
2877
- font-size: 9.6px;
2921
+ .anexos-links-container a {
2878
2922
  white-space: nowrap;
2879
2923
  text-overflow: ellipsis;
2880
2924
  overflow: hidden;
2881
- max-width: 90%;
2882
- font-weight: bold;
2883
- top: 2px;
2925
+ margin-right: 5px;
2926
+ font-weight: 550;
2927
+ color: inherit;
2928
+ text-decoration: none;
2884
2929
  }
2885
2930
 
2886
- .menu-primario {
2887
- visibility: hidden;
2888
- opacity: 0;
2889
- transition: opacity 150ms ease-in-out;
2890
- position: absolute;
2891
- font-size: 11.2px;
2892
- top: 3px;
2893
- display: flex;
2894
- gap: 5px;
2895
- padding: 2px 4px;
2896
- }
2897
- .menu-primario.principal {
2898
- left: 4px;
2899
- color: var(--text-color);
2900
- background-color: var(--message-color);
2901
- }
2902
- .menu-primario.outros {
2903
- right: 4px;
2904
- color: var(--text-color);
2905
- background-color: #fff;
2931
+ .anexos-links-container svg {
2932
+ cursor: pointer;
2906
2933
  }
2907
2934
 
2908
- .menu-primario.outros > span:nth-child(1) {
2909
- order: 10;
2935
+ .mensagem-div-anexo img {
2936
+ cursor: pointer;
2937
+ margin: 10px 0;
2938
+ min-width: 35px;
2939
+ width: 100%;
2940
+ max-width: 250px;
2910
2941
  }
2911
2942
 
2912
- .menu-mensagem {
2913
- cursor: pointer;
2914
- padding: 1px;
2943
+ .anexo-transition {
2944
+ width: 100%;
2945
+ height: 100%;
2915
2946
  }
2916
2947
 
2917
- .menu-flutuante {
2918
- background-color: #fff;
2919
- -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
2920
- 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
2921
- -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
2922
- 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
2923
- box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
2924
- 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
2925
- border-radius: 10px;
2926
- position: absolute;
2927
- top: 20px;
2928
- width: 120px;
2929
- min-height: 50px;
2930
- height: 50px;
2931
- max-height: 50px;
2932
- overflow-x: hidden;
2933
- overflow-y: auto;
2934
- margin: 0;
2935
- padding: 0;
2948
+ .anexo-mensagem {
2936
2949
  display: flex;
2950
+ justify-content: center;
2951
+ align-items: center;
2937
2952
  flex-direction: column;
2938
- z-index: 1;
2953
+ width: 100%;
2939
2954
  }
2940
2955
 
2941
- .menu-flutuante.principal {
2942
- left: 3px;
2956
+ .alert-danger {
2957
+ color: #721c24;
2958
+ background-color: #f8d7da;
2959
+ border-color: #f5c6cb;
2943
2960
  }
2944
2961
 
2945
- .menu-flutuante.outros {
2946
- right: 3px;
2962
+ .alert {
2963
+ position: relative;
2964
+ padding: 10.4px 19.2px;
2965
+ margin: 5px 0;
2966
+ border: 1px solid transparent;
2967
+ border-radius: 4px;
2968
+ text-align: center;
2969
+ }
2970
+
2971
+ .alert svg {
2972
+ font-size: 1.025em;
2973
+ margin-right: 2px;
2974
+ }
2975
+
2976
+ .pdf {
2977
+ color: #e74c3c;
2978
+ }
2979
+
2980
+ .doc {
2981
+ color: #006bc9;
2982
+ }
2983
+
2984
+
2985
+ .audio-speed-control {
2986
+ display: flex;
2987
+ align-items: center;
2988
+ cursor: pointer;
2989
+ margin-left: 10px;
2947
2990
  }
2948
2991
 
2949
- .menu-flutuante li {
2950
- transition: background-color 300ms ease-in-out;
2951
- width: 100%;
2952
- cursor: pointer;
2953
- padding: 5px 10px;
2992
+ .speed-circle {
2993
+ width: 40px;
2994
+ height: 40px;
2995
+ background-color: #f1f3f4; /* Cor do círculo */
2996
+ border: solid black 1px;
2997
+ color: black;
2954
2998
  display: flex;
2999
+ justify-content: center;
2955
3000
  align-items: center;
3001
+ border-radius: 50%;
3002
+ font-weight: bold;
3003
+ transition: background-color 0.3s;
2956
3004
  }
2957
3005
 
2958
- .menu-flutuante li:hover {
2959
- background-color: #e9e9e9;
3006
+ .speed-circle.active {
3007
+ background-color: #f1f3f4; /* Cor quando ativo */
3008
+ border: solid blue 1px;
3009
+
2960
3010
  }
3011
+
2961
3012
 
2962
- /* Principal */
2963
- .mensagem__principal {
3013
+ .interatividade-btn {
2964
3014
  width: 100%;
2965
3015
  display: flex;
2966
- justify-content: flex-end;
3016
+ justify-content: center;
3017
+ align-items: center;
3018
+ background-color: #fff;
3019
+ color: #111b21;
3020
+ padding: 10px 12px;
3021
+ border-radius: 5px;
3022
+ margin-bottom: 10px;
2967
3023
  }
2968
- .mensagem__principal > .mensagem::after {
2969
- content: "";
2970
- width: 0;
2971
- height: 0;
2972
- position: absolute;
2973
- border-left: 10px solid transparent;
2974
- border-right: 10px solid transparent;
2975
- border-top: 10px solid var(--message-color);
2976
- bottom: 5px;
2977
- right: -10px;
2978
- transform: rotate(-90deg);
3024
+ .interatividade-btn:nth-child(1) {
3025
+ margin-top: 10px;
2979
3026
  }
2980
- .mensagem__principal > .mensagem {
2981
- background-color: var(--message-color);
2982
- color: var(--text-color);
3027
+ .interatividade-titulo {
3028
+ white-space: nowrap;
3029
+ text-overflow: ellipsis;
3030
+ overflow: hidden;
3031
+ max-width: 100%;
3032
+ margin: 0;
3033
+ padding: 0;
2983
3034
  }
2984
3035
 
2985
- .mensagem__principal > .mensagem .horario-envio {
2986
- color: var(--text-color);
2987
- }
2988
- .mensagem__principal > .mensagem .autor-mensagem {
2989
- right: 5px;
2990
- color: var(--text-color);
2991
- }
2992
- /* Outros */
2993
- .mensagem__outros {
3036
+ .interatividade-lista {
2994
3037
  width: 100%;
2995
- display: flex;
2996
- }
2997
- .mensagem__outros > .mensagem {
3038
+ min-width: 200px;
3039
+ border-radius: 15px;
2998
3040
  background-color: #fff;
2999
3041
  color: #333;
3042
+ margin: 10px 0;
3000
3043
  }
3001
- .mensagem__outros > .mensagem::after {
3002
- content: "";
3003
- width: 0;
3004
- height: 0;
3005
- position: absolute;
3006
- border-left: 10px solid transparent;
3007
- border-right: 10px solid transparent;
3008
- border-top: 10px solid #fff;
3009
- bottom: 5px;
3010
- left: -10px;
3011
- transform: rotate(90deg);
3044
+
3045
+ .interatividade-lista-conteudo {
3046
+ padding: 10px;
3047
+ border-bottom: 1px solid #d7d7d7;
3012
3048
  }
3013
- /* .mensagem__outros .check{
3014
- display: none
3015
- } */
3016
- .mensagem__outros > .autor-mensagem {
3017
- left: 5px;
3018
- color: #333;
3049
+ .interatividade-lista-titulo {
3050
+ font-weight: bold;
3051
+ font-size: 1.2em;
3052
+ margin-bottom: 10px;
3019
3053
  }
3020
- /* Mapa */
3021
- .mensagem-div-mapa {
3022
- width: 100%;
3023
- display: flex;
3024
- justify-content: center;
3025
- align-items: center;
3026
- flex-direction: column;
3027
- margin-bottom: 5px;
3054
+ .interatividade-lista-rodape {
3055
+ color: #818181;
3056
+ margin-top: 5px;
3028
3057
  }
3029
-
3030
- .msg-mapa {
3058
+ .interatividade-lista-link {
3031
3059
  width: 100%;
3032
- min-height: 225px;
3033
- height: 100%;
3034
- box-sizing: initial;
3060
+ text-align: center;
3061
+ padding: 10px;
3062
+ color: rgb(0, 110, 255);
3063
+ cursor: pointer;
3064
+ transition: color 200ms ease-in-out;
3035
3065
  }
3036
- .msg-mapa img {
3037
- max-width: none !important;
3066
+ .interatividade-lista-link:hover {
3067
+ color: rgb(0, 98, 143);
3038
3068
  }
3069
+
3039
3070
 
3040
- .info-mapa {
3041
- list-style-type: none;
3042
- }
3043
- .info-mapa li.title {
3044
- font-size: 0.85em;
3045
- }
3046
- .info-mapa li.address,
3047
- .info-mapa li.url {
3048
- font-size: 0.85em;
3049
- }
3050
- .info-mapa li.url {
3051
- font-size: 0.85em;
3071
+ .link-preview {
3072
+ display: flex;
3073
+ flex-direction: column;
3074
+ background-color: #eee;
3075
+ color: #333;
3076
+ cursor: pointer;
3077
+ margin: 5px 0;
3078
+ border-radius: 5px;
3079
+ opacity: 0.95;
3080
+ transition: opacity 300ms ease-in-out;
3081
+ font-size: 13.6px;
3052
3082
  }
3053
3083
 
3054
- .tooltip-list {
3055
- margin: 0;
3056
- padding: 0;
3084
+ .link-preview-image {
3057
3085
  display: flex;
3058
- flex-direction: column;
3059
3086
  justify-content: center;
3060
- align-items: flex-start;
3087
+ align-items: center;
3088
+ padding: 1px;
3089
+ border-top-left-radius: 5px;
3090
+ border-top-right-radius: 5px;
3061
3091
  }
3062
3092
 
3063
- .emoji-message-container {
3064
- position: absolute;
3065
- top: 0;
3066
- z-index: 1;
3067
- width: 300px;
3068
- height: 250px;
3093
+ .link-preview-author {
3094
+ margin: 5px;
3095
+ font-size: 0.615em;
3096
+ font-weight: bold;
3069
3097
  }
3070
- /* .emoji-message-container {
3071
- z-index: 1;
3098
+ .link-preview-author.mb-0 {
3099
+ margin-bottom: 0;
3100
+ }
3101
+ .link-preview-author h1 {
3072
3102
  overflow: hidden;
3073
- width: 300px;
3074
- height: 250px;
3075
-
3076
- >.sm-emoji-picker {
3077
- position: relative;
3078
- width: 300px;
3079
- height: 250px;
3080
- }
3103
+ text-overflow: ellipsis;
3104
+ white-space: nowrap;
3081
3105
  }
3082
3106
 
3083
- .mensagem .reaction {
3084
- $size: 1.8em;
3085
- width: $size;
3086
- height: $size;
3087
- min-width: $size;
3088
- min-height: $size;
3089
- max-width: $size;
3090
- max-height: $size;
3091
- } */
3092
-
3093
- .emoji-message-container .sm-emoji-picker {
3094
- width: 300px;
3095
- height: 250px;
3096
- }
3097
- .emoji-message-container .sm-emoji-picker .sm-emoji-header {
3098
- overflow-x: auto;
3099
- overflow-y: hidden;
3107
+ .link-preview-image img {
3108
+ min-width: 100px;
3109
+ max-width: 200px;
3110
+ border-top-left-radius: 5px;
3111
+ border-top-right-radius: 5px;
3100
3112
  }
3101
3113
 
3102
- .reaction {
3103
- position: absolute;
3104
- bottom: 0;
3105
- border-radius: 50%;
3106
- display: flex;
3107
- justify-content: center;
3108
- align-items: center;
3109
- background-color: rgba(100, 100, 100, 0.4);
3114
+ .link-preview-infos {
3115
+ background-color: #2626261a;
3110
3116
  padding: 5px;
3111
- font-size: 1.3em;
3112
- min-width: 1.8em;
3113
- min-height: 1.8em;
3114
- max-width: 1.8em;
3115
- max-height: 1.8em;
3116
- }
3117
-
3118
- .reaction > span {
3119
- display: block;
3120
- transform: translateY(-1px);
3121
- }
3122
-
3123
- .mensagem__outros .reaction {
3124
- right: -30px;
3117
+ margin: 5px;
3118
+ font-size: 0.83em;
3119
+ border-radius: 5px;
3125
3120
  }
3126
3121
 
3127
- .mensagem__principal .reaction {
3128
- left: -30px;
3122
+ .link-preview:hover {
3123
+ opacity: 1;
3129
3124
  }
3130
-
3131
-
3132
- .simple-btn--icon.custom > span {
3133
- width: 20px;
3134
- height: 20px;
3125
+ .link-preview:hover .link-preview-infos p {
3126
+ text-decoration: underline;
3135
3127
  }
3136
3128
 
3137
3129
 
@@ -3201,6 +3193,12 @@ svg {
3201
3193
 
3202
3194
 
3203
3195
 
3196
+ .simple-btn--icon.custom > span {
3197
+ width: 20px;
3198
+ height: 20px;
3199
+ }
3200
+
3201
+
3204
3202
  .fade-enter-active,
3205
3203
  .fade-leave-active {
3206
3204
  transition: opacity 0.3s;
@@ -3209,7 +3207,6 @@ svg {
3209
3207
  .fade-leave-to {
3210
3208
  opacity: 0;
3211
3209
  }
3212
-
3213
3210
 
3214
3211
  .btn-rolagem {
3215
3212
  position: absolute;
@@ -3253,6 +3250,88 @@ svg {
3253
3250
  }
3254
3251
  }
3255
3252
 
3253
+
3254
+ .w-100 {
3255
+ width: 100%;
3256
+ }
3257
+ .text-dark {
3258
+ color: #333
3259
+ }
3260
+ .min-h-60 {
3261
+ min-height: 60px;
3262
+ }
3263
+ .d-flex {
3264
+ display: flex;
3265
+ }
3266
+ .flex-wrap {
3267
+ flex-wrap: wrap;
3268
+ }
3269
+ .border-bottom-1 {
3270
+ border-bottom: 1px solid;
3271
+ }
3272
+ .border-color-gray {
3273
+ border-color: #CCC
3274
+ }
3275
+ .transition-150 {
3276
+ transition: all 150ms ease-in-out;
3277
+ }
3278
+ .cursor-pointer {
3279
+ cursor: pointer;
3280
+ }
3281
+ .justify-content-between {
3282
+ justify-content: space-between;
3283
+ }
3284
+ .align-items-center {
3285
+ align-items: center;
3286
+ }
3287
+ .align-self-start {
3288
+ align-self: flex-start;
3289
+ }
3290
+ .border-radius-round {
3291
+ border-radius: 50%!important;
3292
+ }
3293
+ .w-36px {
3294
+ width: 36px;
3295
+ }
3296
+ .h-36px {
3297
+ height: 36px;
3298
+ }
3299
+ .border-1 {
3300
+ border: 1px solid;
3301
+ }
3302
+ .mr-10 {
3303
+ margin-right: 10px;
3304
+ }
3305
+ .flex-column {
3306
+ display: flex;
3307
+ flex-direction: column
3308
+ }
3309
+ .text-bold {
3310
+ font-weight: bold;
3311
+ }
3312
+ .fs-_9 {
3313
+ font-size: 14.4px;
3314
+ }
3315
+ .fs-_8 {
3316
+ font-size: 12.8px;
3317
+ }
3318
+ .text-gray {
3319
+ color: gray;
3320
+ }
3321
+ .p-15 {
3322
+ padding: 15px;
3323
+ }
3324
+ .text-ellipsis{
3325
+ white-space: nowrap;
3326
+ text-overflow: ellipsis;
3327
+ overflow: hidden
3328
+ }
3329
+ .d-flex-center{
3330
+ display: flex;
3331
+ justify-content: center;
3332
+ align-items: center
3333
+ }
3334
+
3256
3335
 
3257
3336
  .mr-5 {
3258
3337
  margin-right: 5px;
@@ -3335,85 +3414,3 @@ svg {
3335
3414
  margin-right: 5px;
3336
3415
  }
3337
3416
 
3338
-
3339
- .w-100 {
3340
- width: 100%;
3341
- }
3342
- .text-dark {
3343
- color: #333
3344
- }
3345
- .min-h-60 {
3346
- min-height: 60px;
3347
- }
3348
- .d-flex {
3349
- display: flex;
3350
- }
3351
- .flex-wrap {
3352
- flex-wrap: wrap;
3353
- }
3354
- .border-bottom-1 {
3355
- border-bottom: 1px solid;
3356
- }
3357
- .border-color-gray {
3358
- border-color: #CCC
3359
- }
3360
- .transition-150 {
3361
- transition: all 150ms ease-in-out;
3362
- }
3363
- .cursor-pointer {
3364
- cursor: pointer;
3365
- }
3366
- .justify-content-between {
3367
- justify-content: space-between;
3368
- }
3369
- .align-items-center {
3370
- align-items: center;
3371
- }
3372
- .align-self-start {
3373
- align-self: flex-start;
3374
- }
3375
- .border-radius-round {
3376
- border-radius: 50%!important;
3377
- }
3378
- .w-36px {
3379
- width: 36px;
3380
- }
3381
- .h-36px {
3382
- height: 36px;
3383
- }
3384
- .border-1 {
3385
- border: 1px solid;
3386
- }
3387
- .mr-10 {
3388
- margin-right: 10px;
3389
- }
3390
- .flex-column {
3391
- display: flex;
3392
- flex-direction: column
3393
- }
3394
- .text-bold {
3395
- font-weight: bold;
3396
- }
3397
- .fs-_9 {
3398
- font-size: 14.4px;
3399
- }
3400
- .fs-_8 {
3401
- font-size: 12.8px;
3402
- }
3403
- .text-gray {
3404
- color: gray;
3405
- }
3406
- .p-15 {
3407
- padding: 15px;
3408
- }
3409
- .text-ellipsis{
3410
- white-space: nowrap;
3411
- text-overflow: ellipsis;
3412
- overflow: hidden
3413
- }
3414
- .d-flex-center{
3415
- display: flex;
3416
- justify-content: center;
3417
- align-items: center
3418
- }
3419
-