Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3593 stevensc 1
.chatbox .panel {
3597 stevensc 2
  background: $bg-color;
3
  border: 1px solid $border-primary;
3598 stevensc 4
  border-top-left-radius: $border-radius;
5
  border-top-right-radius: $border-radius;
3593 stevensc 6
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
3598 stevensc 7
  margin: 0;
3593 stevensc 8
}
9
 
10
.chatbox .panel-heading {
3598 stevensc 11
  background-color: $bg-color-secondary;
3593 stevensc 12
  padding: 10px 15px;
3598 stevensc 13
  border-bottom: 1px solid $border-primary;
3593 stevensc 14
}
15
 
16
.chatbox .panel-title {
17
  margin-top: 0;
18
  margin-bottom: 0;
19
  font-size: 16px;
20
  color: inherit;
21
  position: relative;
22
}
23
 
24
.chatbox .panel-title-group {
25
  margin-top: 0;
26
  margin-bottom: 0;
27
  font-size: 16px;
28
  color: inherit;
29
  position: relative;
30
  height: 41px;
31
}
32
 
33
.chatbox-icon {
34
  right: 230px;
35
  bottom: 23px;
36
  padding-top: 15px;
37
  margin-bottom: 0;
38
  z-index: 998;
39
  cursor: pointer;
40
  display: none;
41
  position: fixed;
42
}
43
 
44
.contact-floating {
45
  width: 54px;
46
  height: 54px;
47
  border-radius: 50%;
48
}
49
 
50
.contact-floating img {
51
  width: 54px;
52
  height: 54px;
3602 stevensc 53
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
3593 stevensc 54
}
55
 
56
.red {
57
  background-color: #f44336 !important;
58
}
59
 
60
.contact-floating .status.Online:after {
61
  background-color: #6cd187;
62
}
63
 
64
.contact-floating .status.Offline:after {
65
  background-color: #bdbdbd;
66
}
67
 
68
.contact-floating .status:after {
69
  content: "";
70
  position: absolute;
71
  height: 9px;
72
  width: 9px;
73
  left: 43px;
74
  top: 55px;
75
  border: 1px solid #fff;
76
  border-radius: 50%;
77
  display: block;
78
}
79
 
80
.contact-floating .unread-msg {
81
  content: "";
82
  position: absolute;
83
  height: 18px;
84
  width: 18px;
85
  left: 0px;
86
  top: 12px;
87
  border: 1px solid #fff;
88
  border-radius: 50%;
89
  display: block;
90
  color: #fff;
91
  text-align: center;
92
  font-size: 11px;
93
  font-weight: bold;
94
  background-color: #f44336 !important;
95
}
96
 
97
.personal-chat .chat-image {
98
  margin-right: 10px;
99
}
100
 
101
.personal-chat .header-elements {
102
  padding-top: 5px;
103
  line-height: 15px;
104
}
105
 
3602 stevensc 106
.personal-chat .header-elements a {
3599 stevensc 107
  color: $font-color;
108
}
109
 
3593 stevensc 110
.chatbox .panel-heading small {
111
  line-height: 23px;
112
  font-size: 12px;
113
}
114
 
115
.personal-chat .header-elements .status b {
3599 stevensc 116
  color: $subtitle-color;
3593 stevensc 117
}
118
 
119
.personal-chat .header-elements .status:after {
120
  content: "";
121
  position: absolute;
122
  height: 10px;
123
  width: 10px;
124
  left: 24px;
125
  top: 26px;
126
  border: 2px solid #fff;
127
  border-radius: 50%;
128
  display: block;
129
}
130
 
131
.personal-chat .header-elements .status.Online:after {
3785 stevensc 132
  background-color: $online-green;
3593 stevensc 133
}
134
 
135
.personal-chat .header-elements .status.Offline:after {
136
  background-color: #bdbdbd;
137
}
138
 
139
.personal-chat .header-elements .status.Away:after {
140
  background-color: #faf03a;
141
}
142
 
143
.personal-chat .header-elements .status.dnd:after {
144
  background-color: #e80957;
145
}
146
 
147
.personal-chat .options {
148
  position: absolute;
149
  right: -5%;
150
  top: 6%;
151
  transform: translateY(-50%);
152
}
153
 
154
.chatbox .btn-group,
155
.chatbox .btn-group-vertical {
156
  position: relative;
157
  display: inline-block;
158
  vertical-align: middle;
159
  cursor: pointer;
160
}
161
 
162
.personal-chat .panel-heading span {
163
  margin-top: 3px;
3599 stevensc 164
  color: $subtitle-color;
3593 stevensc 165
}
166
 
167
.personal-chat .options .attachment {
168
  -webkit-transform: rotate(45deg);
169
  -moz-transform: rotate(45deg);
170
  -ms-transform: rotate(45deg);
171
  -o-transform: rotate(45deg);
172
  transform: rotate(945deg);
173
  display: inline-block;
174
  font-size: 18px;
175
}
176
 
177
.personal-chat .options i {
178
  padding: 5px;
179
}
180
 
181
.personal-chat .options .dropdown-menu {
182
  min-width: 100px;
183
}
184
 
185
.dropdown-menu {
186
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
187
  z-index: 2300;
188
}
189
 
190
.dropdown-menu-right {
191
  left: auto;
192
  right: 0;
193
}
194
 
195
.dropdown-menu {
196
  position: absolute;
197
  top: 100%;
198
  left: 0;
199
  z-index: 1000;
200
  display: none;
201
  min-width: 160px;
202
  padding: 5px 0;
203
  margin: 2px 0 0;
204
  list-style: none;
205
  font-size: 14px;
206
  text-align: left;
207
  background-color: #fff;
208
  border: 1px solid #ccc;
209
  border: 1px solid rgba(0, 0, 0, 0.15);
210
  border-radius: 4px;
211
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
212
  background-clip: padding-box;
213
}
214
 
215
.personal-chat .options .dropdown-menu li {
216
  border-bottom: 1px solid #e5e5e5;
217
}
218
 
3602 stevensc 219
.dropdown-menu > li > a {
3593 stevensc 220
  display: block;
221
  padding: 3px 20px;
222
  clear: both;
223
  font-weight: normal;
224
  line-height: 1.428571429;
225
  color: #333333;
226
  white-space: nowrap;
227
}
228
 
229
li.active a,
230
a:hover,
231
a {
232
  text-decoration: none !important;
233
}
234
 
235
.personal-chat .options i {
236
  padding: 5px;
237
}
238
 
239
.text-primary {
240
  color: #6699cc;
241
}
242
 
243
.personal-chat .panel-body {
244
  padding: 0;
245
}
246
 
247
.panel-body:before,
248
.panel-body:after {
249
  content: " ";
250
  display: table;
251
}
252
 
253
.panel-body:after {
254
  clear: both;
255
}
256
 
257
.chat-conversation {
3597 stevensc 258
  background-color: $bg-color;
3593 stevensc 259
}
260
 
261
.reverseChatBox {
262
  display: flex;
263
  flex-flow: column-reverse;
264
  flex-wrap: nowrap;
265
  overflow: auto;
266
  padding: 1rem;
267
  overflow-y: auto;
268
  overflow-x: hidden;
269
  height: 275px;
270
}
271
 
4151 stevensc 272
.conversation-list {
3593 stevensc 273
  display: flex;
274
  flex-direction: column;
4151 stevensc 275
  .ctext-wrap {
276
    display: inline-block;
277
    padding: 5px 10px;
278
    position: relative;
279
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
280
    max-width: 65%;
281
    p {
282
      margin: 0;
283
      padding-top: 3px;
284
      color: $chat-color;
285
      word-break: break-word;
286
    }
287
    i {
288
      color: $subtitle-color;
289
      display: block;
290
      font-size: 11px;
291
      font-style: normal;
292
      position: relative;
293
    }
294
    label {
295
      font-size: 0.8rem;
296
      margin-left: 0.5rem;
297
      color: $chat-color;
298
    }
299
  }
300
  .conversation-text {
301
    width: 100%;
302
    align-items: center;
303
    display: flex;
304
    flex-direction: row;
305
    font-size: 13px;
306
  }
307
  .odd .conversation-text {
308
    width: 100%;
309
    display: flex;
310
    margin-right: 15px;
311
    font-size: 13px;
312
    flex-direction: row-reverse;
313
    margin-left: 0;
314
    align-items: center;
315
  }
3593 stevensc 316
}
317
 
318
.conversation-list .conversation-text .la-ellipsis-v {
319
  cursor: pointer;
320
  height: 30px;
321
  display: grid;
322
  place-items: center;
323
  width: 30px;
324
  border-radius: 50px;
325
  padding: 0;
3602 stevensc 326
  transition: all 0.2s;
3601 stevensc 327
  color: $chat-color;
3593 stevensc 328
}
329
 
330
.conversation_container {
331
  display: flex;
332
  flex-direction: column;
333
  gap: 10px;
334
}
335
 
336
.conversation-list .conversers1 .ctext-wrap {
3599 stevensc 337
  background: $chat-received;
3601 stevensc 338
  border-radius: 10px 0 10px 10px;
3593 stevensc 339
}
340
 
3602 stevensc 341
.conversation-list .conversers1 .ctext-wrap ~ .display-reactions,
342
.conversation-list .conversers1 .ctext-wrap ~ .la-ellipsis-v:hover {
3601 stevensc 343
  background: $chat-received;
344
}
345
 
3593 stevensc 346
.conversation-list .conversers2 .ctext-wrap {
3599 stevensc 347
  background: $chat-send;
3601 stevensc 348
  border-radius: 0 10px 10px 10px;
3593 stevensc 349
}
350
 
3602 stevensc 351
.conversation-list .conversers2 .ctext-wrap ~ .display-reactions,
352
.conversation-list .conversers2 .ctext-wrap ~ .la-ellipsis-v:hover {
3601 stevensc 353
  background: $chat-send;
354
}
355
 
3593 stevensc 356
/*chat loader*/
357
 
358
.ctext-wrap .reply {
359
  width: 98px;
360
  color: #777;
361
}
362
 
363
.spinner {
364
  padding-top: 6px;
365
}
366
 
3602 stevensc 367
.spinner > div {
3593 stevensc 368
  width: 5px;
369
  height: 5px;
370
  background-color: #777;
371
  margin-right: 2px;
372
  border-radius: 50%;
373
  display: inline-block;
374
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
375
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
376
}
377
 
378
.spinner .bounce1 {
379
  -webkit-animation-delay: -0.32s;
380
  animation-delay: -0.32s;
381
}
382
 
383
.spinner .bounce2 {
384
  -webkit-animation-delay: -0.16s;
385
  animation-delay: -0.16s;
386
}
387
 
388
@keyframes sk-bouncedelay {
389
  0%,
390
  80%,
391
  100% {
392
    -webkit-transform: scale(0);
393
    transform: translateY(-7px);
3541 stevensc 394
  }
3593 stevensc 395
 
396
  40% {
397
    -webkit-transform: scale(1);
398
    transform: translateY(0);
3541 stevensc 399
  }
3593 stevensc 400
}
401
 
402
/*chat end*/
403
 
404
*::-webkit-scrollbar {
405
  width: 6px !important;
406
  height: 6px !important;
407
}
408
 
409
*::-webkit-scrollbar-thumb {
410
  background-color: rgba(0, 0, 0, 0.2);
411
}
412
 
413
*::-webkit-scrollbar-track {
414
  background: rgba(255, 255, 255, 0.08);
415
}
416
 
417
.wchat-wrapper-main::-webkit-scrollbar-track {
418
  background-color: #dfdfdf;
419
}
420
 
421
*::-webkit-input-placeholder {
422
  color: #ccc;
423
  font-size: 15px;
424
}
425
 
426
*::-moz-placeholder {
427
  color: #ccc;
428
  font-size: 15px;
429
}
430
 
431
.font-24 {
432
  font-size: 24px !important;
433
}
434
 
435
.wchat-chat-footer {
3604 stevensc 436
  background-color: $bg-color-secondary;
3593 stevensc 437
  -webkit-box-flex: 0;
438
  width: 100%;
439
  box-sizing: border-box;
440
  /* padding-top: 10px; */
441
  z-index: 1;
442
  -webkit-box-ordinal-group: 4;
443
  order: 3;
444
  position: relative;
445
  -webkit-transform: translateZ(0);
446
  transform: translateZ(0);
447
}
448
 
449
.resp_messages-container {
450
  padding: 10px;
451
  height: 0;
452
}
453
 
454
.resp_messages-container.active {
455
  height: auto;
456
}
457
 
458
.resp_messages-container p {
459
  margin-left: 5px;
460
  white-space: nowrap;
461
  overflow: hidden;
462
  text-overflow: ellipsis;
463
}
464
 
465
.chatFrom {
3597 stevensc 466
  background-color: $bg-color-secondary;
3593 stevensc 467
}
468
 
469
.block-wchat .input-container {
3598 stevensc 470
  background-color: $bg-color-secondary;
3593 stevensc 471
}
472
 
473
.block-wchat {
474
  display: -webkit-box;
475
  display: -ms-flexbox;
476
  display: flex;
477
  -webkit-box-orient: horizontal;
478
  -webkit-box-direction: normal;
479
  -ms-flex-direction: row;
480
  flex-direction: row;
481
  -webkit-box-align: end;
482
  -ms-flex-align: end;
483
  align-items: flex-end;
484
  padding: 10px 19px;
485
  max-width: 100%;
486
  box-sizing: border-box;
487
  position: relative;
488
  z-index: 2;
489
}
490
 
491
.block-wchat .btn-emoji {
492
  margin-right: 20px;
493
  margin-bottom: 7px;
494
}
495
 
496
.block-wchat .btn-attach {
497
  /* margin-right: 20px; */
498
  margin-bottom: 7px;
499
}
500
 
501
.block-wchat .send-container,
502
.block-wchat .ptt-container,
503
.block-wchat .btn-emoji {
504
  -webkit-box-flex: 0;
505
  -ms-flex: 0 0 auto;
506
  flex: 0 0 auto;
507
}
508
 
509
.block-wchat .input-container {
510
  border-radius: 5px;
511
  background-clip: padding-box;
512
  width: inherit;
513
  -webkit-box-flex: 1;
514
  -ms-flex: 1 1 auto;
515
  flex: 1 1 auto;
516
  min-width: 0;
517
  border-color: #fff;
518
  border-width: 1px;
519
  border-style: solid;
520
  box-sizing: border-box;
521
  padding-right: 16px;
522
}
523
 
524
.active_chats-list {
525
  display: flex;
4115 stevensc 526
  align-items: flex-end;
3593 stevensc 527
  gap: 10px;
528
  width: fit-content;
529
  z-index: 100;
530
}
531
 
532
.input,
533
.block-wchat .input-container,
534
.input-line {
535
  font-weight: 400;
536
}
537
 
538
.input-container {
539
  -webkit-transition: height 0.18s ease-in-out;
540
  transition: height 0.18s ease-in-out;
541
}
542
 
543
.input-emoji {
544
  position: relative;
545
}
546
 
547
.block-wchat .input-placeholder {
548
  top: 0;
549
  margin-left: 2px;
550
}
551
 
552
.block-wchat .input-container .input,
553
.block-wchat .input-container .input-container {
554
  word-wrap: break-word;
555
  white-space: pre-wrap;
556
  padding: 0 2px 0 0;
557
  min-height: 20px;
558
  max-height: 100px;
559
  overflow-y: auto;
560
  overflow-x: hidden;
3598 stevensc 561
  background-color: $bg-color-secondary;
3593 stevensc 562
  border-left: 0.1px solid transparent;
563
  position: relative;
564
  z-index: 1;
565
}
566
 
567
.input,
568
.block-wchat .input-container {
569
  -webkit-user-select: text;
570
  -moz-user-select: text;
571
  -ms-user-select: text;
572
  user-select: text;
573
  line-height: 20px;
574
  font-size: 15px;
575
  min-height: 20px;
576
  border: none;
577
  padding: 8px 8px;
578
  width: 100%;
579
  outline: none;
580
}
581
 
582
.input-placeholder {
583
  -webkit-user-select: none;
584
  -moz-user-select: none;
585
  -ms-user-select: none;
586
  user-select: none;
587
  position: absolute;
588
  top: 6px;
589
  left: 0;
590
  color: #999;
591
  pointer-events: none;
592
  -webkit-transition: opacity 0.08s linear;
593
  transition: opacity 0.08s linear;
594
  font-size: 15px;
595
  line-height: 20px;
596
  z-index: 0;
597
  font-family: "Open Sans", sans-serif;
598
}
599
 
600
.block-wchat .send-container,
601
.block-wchat .ptt-container,
602
.block-wchat .btn-emoji {
603
  -webkit-box-flex: 0;
604
  -ms-flex: 0 0 auto;
605
  flex: 0 0 auto;
606
}
607
 
608
.block-wchat {
609
  padding: 8px 8px !important;
610
}
611
 
612
.block-wchat .btn-emoji {
613
  margin-right: 10px !important;
614
}
615
 
616
.chatbox {
617
  width: 260px;
618
  display: none;
619
  z-index: 10;
620
}
621
 
622
/* Tooltip text */
623
 
624
.wchat-box-items-positioning-container {
625
  position: absolute;
626
  top: 0;
627
  width: 100%;
628
}
629
 
630
.wchat-box-items-overlay-container {
631
  position: absolute;
632
  bottom: 0;
633
  width: 100%;
634
  box-sizing: border-box;
635
}
636
 
637
.customtab2 {
638
  border-bottom: 1px solid #f7fafc;
639
  border-top: 1px solid #f7fafc;
640
  /* padding: 10px 0; */
641
  background: #f9f9f9;
642
}
643
 
644
.menu-tabs {
645
  display: -webkit-box;
646
  display: -ms-flexbox;
647
  display: flex;
648
  -webkit-box-align: center;
649
  -ms-flex-align: center;
650
  align-items: center;
651
}
652
 
3602 stevensc 653
.nav > li > a {
3593 stevensc 654
  position: relative;
655
  display: block;
656
  padding: 10px 0px;
657
}
658
 
659
.menu-tabs-emoji {
660
  position: relative;
661
  height: 50px;
662
  background-color: #fff;
663
  -webkit-box-flex: 0;
664
  -ms-flex: none;
665
  flex: none;
666
}
667
 
668
.menu-tabs-emoji .menu-item {
669
  height: 50px;
670
}
671
 
672
.menu-tabs-emoji .icon {
673
  vertical-align: middle;
674
}
675
 
676
.menu-tabs-marker {
677
  position: absolute;
678
  bottom: 0;
679
  left: 0;
680
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.1, 0.82, 0.25, 1);
681
  transition: transform 0.3s cubic-bezier(0.1, 0.82, 0.25, 1);
682
  height: 4px;
683
  background-color: #009688;
684
}
685
 
3602 stevensc 686
.menu-tabs > .menu-item,
687
.menu-pills > .menu-item {
3593 stevensc 688
  -webkit-box-flex: 1;
689
  -ms-flex: 1;
690
  flex: 1;
691
  text-align: center;
692
}
693
 
694
.menu-item {
695
  cursor: pointer;
696
}
697
 
3602 stevensc 698
.menu-tabs > .menu-item,
699
.menu-pills > .menu-item {
3593 stevensc 700
  -webkit-box-flex: 1;
701
  -ms-flex: 1;
702
  flex: 1;
703
  text-align: center;
704
}
705
 
706
.customtab2 li.active a,
707
.customtab2 li.active a:hover,
708
.customtab2 li.active a:focus {
709
  background: #333333;
710
  border: 1px solid #333333;
711
  color: #ffffff;
712
}
713
 
714
.customtab2 li a {
715
  color: #333333;
716
}
717
 
718
.customtab2 li:hover a {
719
  color: #333333;
720
  border-bottom: 1px solid #333;
721
}
722
 
723
#showhidechatlist {
4387 stevensc 724
  display: flex;
725
  flex-direction: column;
3593 stevensc 726
}
727
 
5028 stevensc 728
.subpanel_title {
3593 stevensc 729
  background: $bg-color-secondary;
730
  color: $subtitle-color;
731
  cursor: pointer;
732
  font-weight: bold;
3602 stevensc 733
  padding: 0.5rem 1rem;
3593 stevensc 734
  font-size: 1.1rem;
735
  display: flex;
736
  justify-content: space-between;
737
  height: 30px;
738
}
739
 
5028 stevensc 740
.subpanel_title span.options {
3593 stevensc 741
  width: 12px;
742
  height: 12px;
743
  display: none;
744
}
745
 
746
.subpanel_title-icons {
747
  display: flex;
748
  align-items: center;
3602 stevensc 749
  gap: 0.5rem;
3593 stevensc 750
  color: $subtitle-color;
751
}
752
 
5028 stevensc 753
.subpanel_title .minusicon:hover {
3593 stevensc 754
  color: #060;
755
}
756
 
5028 stevensc 757
.subpanel_title span.min {
3593 stevensc 758
  padding: 0;
759
}