collaboration.css 17.8 KB
Newer Older
藤川諒 committed
1 2
@charset "UTF-8";
/**************************** header *************************/
Kim Peace committed
3
#collabo_header {
藤川諒 committed
4
  height: 50px;
藤川諒 committed
5 6 7 8
  position: fixed;
  top: 0;
  width: 100%;
  padding: 0 10px;
藤川諒 committed
9
  background: #20304c;
藤川諒 committed
10 11
  z-index: 10;
}
Kim Peace committed
12
.collabo_nav_l {
藤川諒 committed
13 14
  color: #fff;
}
Kim Peace committed
15
.collabo_nav_r .img_wrap {
藤川諒 committed
16 17 18
  width: 45px;
  height: 45px;
}
Kim Peace committed
19
.collabo_nav_r .img_wrap img {
藤川諒 committed
20 21 22 23
  width: 100%;
  height: 100%;
}

24
.breadcrumb_item:not(:last-child):after {
Lee Munkyeong committed
25 26
  content: ">";
  margin: 0 5px;
27 28
}

29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
.menu-icon {
  width: 40px;
  height: 50px;
  margin: 10px 15px;
  transform: scale(0.8);
  padding: 0;
  cursor: pointer;
  z-index: 20;
}
.menu-bar {
  width: 40px;
  height: 5px;
  background: white;
  position: absolute;
  transition: all 0.3s;
}
.menu-bar1 {
  margin-top: 9px;
}
.menu-bar2 {
  margin-top: 23px;
}
.menu-bar3 {
  margin-top: 37px;
}
.menu-icon.hover .menu-bar1 {
  -webkit-transform: rotate(45deg) scaleX(0.7);
  margin-top: 22px;
}
.menu-icon.hover .menu-bar2 {
  opacity: 0;
}
.menu-icon.hover .menu-bar3 {
  -webkit-transform: rotate(-45deg) scaleX(0.7);
  margin-top: 22px;
}
藤川諒 committed
65 66 67

.collabo-label {
  padding: 2px 5px;
藤川諒 committed
68 69
  color: #ffffff;
  font-size: 18px;
藤川諒 committed
70 71 72
  font-weight: bold;
}

藤川諒 committed
73
/**************************** main *************************/
Kim Peace committed
74
#collabo_main {
藤川諒 committed
75
  height: calc(100vh - 130px);
Kim Peace committed
76
  position: relative;
藤川諒 committed
77
  margin-bottom: 80px;
藤川諒 committed
78
  margin-top: 50px;
Kim Peace committed
79
}
藤川諒 committed
80
#overlay_user_list .user_list {
81 82
  background: #383838 !important;
  border: none !important;
83 84 85
  height: calc(100% - 140px);
  overflow-x: unset;
  overflow-y: scroll;
藤川諒 committed
86
}
藤川諒 committed
87 88
#collabo_main .user_list_wrap,
#collabo_main .document_wrap,
Kim Peace committed
89 90
#overlay_user_list .user_list_wrap {
  height: 100%;
藤川諒 committed
91
  background: #383838;
Kim Peace committed
92
}
93 94
#collabo_main .user_list_collabo,
#overlay_user_list .user_list_collabo {
藤川諒 committed
95 96
  background: #383838;
  padding: 0 5px 80px 5px;
97 98
  overflow: auto;
  height: inherit;
Kim Peace committed
99 100 101
}
#collabo_main .user_list .img_wrap,
#overlay_user_list .user_list .img_wrap {
藤川諒 committed
102 103 104 105 106 107
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 5px auto;
  height: 100%;
Kim Peace committed
108 109 110 111 112 113 114 115 116 117 118 119
}
.user_item .name {
  position: absolute;
  top: 65px;
  left: 0;
  right: 0;
  color: #fff;
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 auto;
藤川諒 committed
120 121
}
#collabo_main .user_list .img_wrap img,
Kim Peace committed
122
#overlay_user_list .user_list .img_wrap img {
藤川諒 committed
123 124 125
  width: 80px;
  height: 80px;
  border-radius: 50%;
Kim Peace committed
126 127 128 129 130 131 132 133
}
.noscroll {
  overflow: hidden;
  position: fixed;
}
.none {
  display: none;
}
藤川諒 committed
134

Kim Peace committed
135 136
#collabo_main .user_item.host:before,
#overlay_user_list .user_item.host:before {
藤川諒 committed
137 138 139
  content: "";
  top: 0;
  right: 0;
藤川諒 committed
140
  background: url("../icon/icon_host_tag.svg");
藤川諒 committed
141 142
  position: absolute;
  z-index: 2;
藤川諒 committed
143 144 145
  width: 25px;
  height: 25px;
  margin: 5px;
藤川諒 committed
146 147
  background-repeat: no-repeat;
  background-position: center;
藤川諒 committed
148 149
}
.user_item {
150
  width: calc(50% - 20px);
Kim Peace committed
151 152 153 154 155 156 157 158
  position: relative;
  text-align: center;
  border: 1px solid white;
  border-radius: 5px;
  margin: 5px auto;
  height: calc(100vh / 3);
  line-height: calc(100vh / 3);
  overflow: hidden;
藤川諒 committed
159
}
160

藤川諒 committed
161
.user_item a {
Kim Peace committed
162 163
  display: block;
  height: 100%;
藤川諒 committed
164 165
}

166 167 168 169
#collabo_main .talking_area img {
  width: 60px;
  height: 60px;
}
170 171
#collabo_main .talking_area,
#collabo_main .start_pip_area {
172 173 174 175
  position: relative;
  z-index: 2;
}
.talking_img_wrap {
176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 1px solid #fff;
  box-shadow: 0 0 20px #ffffff;
  cursor: pointer;
}
.talking_img_wrap::before,
.talking_img_wrap::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  border: 1px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
  animation: pulsate 2s linear infinite;
204 205
}

藤川諒 committed
206
/**************************** overlay *************************/
Kim Peace committed
207
.btn {
藤川諒 committed
208 209
  background-color: transparent;
  border: none;
藤川諒 committed
210 211 212
  width: 40px;
  height: 30px;
  margin: 5px;
藤川諒 committed
213 214
  background-repeat: no-repeat;
  background-position: center;
藤川諒 committed
215
  background-size: contain;
藤川諒 committed
216
}
Kim Peace committed
217
.btn.menu_btn {
藤川諒 committed
218
  background-image: url("../icon/icon_collabo_menu.svg");
藤川諒 committed
219
}
Kim Peace committed
220
.btn.user_btn {
藤川諒 committed
221
  background-image: url("../icon/icon_member_white.svg");
藤川諒 committed
222
}
Kim Peace committed
223
.btn.add_user_btn {
藤川諒 committed
224
  background-image: url("../icon/icon_add_member_white.svg");
藤川諒 committed
225
}
Lee Munkyeong committed
226
.btn.exit_btn {
藤川諒 committed
227
  background-image: url("../icon/icon_close.svg");
Lee Munkyeong committed
228
}
Lee Munkyeong committed
229
.btn.start_pip_btn {
藤川諒 committed
230
  background-image: url("../icon/icon_start_pip.svg");
Lee Munkyeong committed
231
}
Kim Peace committed
232 233 234
.btn.add_user_btn.hide,
.btn.user_btn.hide {
  transition: 0.3s;
藤川諒 committed
235
  background-image: url("../icon/icon_member_blue.svg");
藤川諒 committed
236
}
237 238
.btn.menu_btn.hide {
  transition: 0.3s;
藤川諒 committed
239
  background-image: url("../icon/icon_close.svg");
240
}
藤川諒 committed
241
.overlay {
藤川諒 committed
242
  transition: 0.5s;
藤川諒 committed
243 244 245 246
  position: absolute;
  top: 60px;
  width: 100%;
  right: -100%;
藤川諒 committed
247
  background: #383838;
藤川諒 committed
248 249
  height: 100vh;
}
250 251 252
#add_user_list {
  width: 90%;
  height: 90%;
253
}
Kim Peace committed
254 255 256
.fixed {
  position: fixed;
}
藤川諒 committed
257
.overlay.slidein {
藤川諒 committed
258
  top: 50px;
藤川諒 committed
259 260
  right: 0;
  left: 0;
藤川諒 committed
261
  background: #383838;
藤川諒 committed
262 263 264
  height: 100vh;
  z-index: 5;
  width: 100%;
藤川諒 committed
265 266 267 268
  margin: 0px auto 80px auto;
  overflow: scroll;
}
#overlay_menu {
269
  transition: 0.7s;
藤川諒 committed
270 271 272 273
  position: absolute;
  top: 60px;
  right: 0;
}
274
#overlay_menu .item01 {
藤川諒 committed
275
  opacity: 0;
276
  animation: fadein 0.5s ease forwards;
藤川諒 committed
277
}
278
#overlay_menu .item02 {
藤川諒 committed
279 280 281
  opacity: 0;
  animation: fadein 1s ease forwards;
}
282
#overlay_menu .item03 {
藤川諒 committed
283 284 285
  opacity: 0;
  animation: fadein 1.5s ease forwards;
}
286
#overlay_menu .item04 {
藤川諒 committed
287 288 289
  opacity: 0;
  animation: fadein 2s ease forwards;
}
290
#overlay_menu .item05 {
藤川諒 committed
291 292 293
  opacity: 0;
  animation: fadein 2.5s ease forwards;
}
294 295 296 297 298 299 300
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
藤川諒 committed
301
}
302 303 304 305 306 307 308
@keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
藤川諒 committed
309
}
藤川諒 committed
310

藤川諒 committed
311 312 313 314
#overlay_menu .item01.hide,
#overlay_menu .item02.hide,
#overlay_menu .item03.hide,
#overlay_menu .item04.hide,
315
#overlay_menu .item05.hide {
藤川諒 committed
316 317 318 319 320 321 322 323 324 325
  opacity: 1;
  animation: fadeout 0.3s ease forwards;
}
.item-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 70px;
  height: 70px;
  background: #ff8f8f4a;
藤川諒 committed
326 327 328 329
}

/* メニュー */
#overlay_menu .menu_wrap .menu .item {
藤川諒 committed
330 331
  width: 70px;
  height: 70px;
藤川諒 committed
332
  background: #20304c78;
藤川諒 committed
333
  position: relative;
藤川諒 committed
334 335
  z-index: 999;
}
336
#overlay_menu .menu_wrap .menu .item.hide {
藤川諒 committed
337
  z-index: 0;
藤川諒 committed
338 339 340
}
#overlay_menu .menu_wrap .menu .item:hover {
  background: #20304c4a;
藤川諒 committed
341 342
}
#overlay_menu .menu_wrap .menu {
藤川諒 committed
343
  width: 90px;
藤川諒 committed
344
}
Kim Peace committed
345
#overlay_menu .menu_wrap .menu .item a {
藤川諒 committed
346 347
  text-align: center;
  color: #fff;
藤川諒 committed
348
  padding-top: 6px;
藤川諒 committed
349
}
350 351
#overlay_menu .menu_wrap .menu .item span {
  font-size: 12px;
藤川諒 committed
352
}
藤川諒 committed
353
#overlay_menu .img_wrap {
藤川諒 committed
354 355 356 357
  width: 35px;
  height: 35px;
  line-height: 35px;
  margin-bottom: 3px;
藤川諒 committed
358 359
}
#overlay_menu .img_wrap img {
藤川諒 committed
360 361
  width: 35px;
  height: 35px;
藤川諒 committed
362
}
363
.fas.fa-wrench {
藤川諒 committed
364 365 366 367
  color: #fff;
  font-size: 24px;
  vertical-align: middle;
}
藤川諒 committed
368 369

/* ユーザー追加 */
370

藤川諒 committed
371 372
#add_user_list .user_list li {
  list-style: none;
Kim Peace committed
373
  border-bottom: 1px solid #e2e8f0;
藤川諒 committed
374 375 376
  position: relative;
}
#add_user_list .user_list li:first-child {
Kim Peace committed
377
  border-top: 1px solid #e2e8f0;
藤川諒 committed
378 379 380 381
}
#add_user_list .chat_item_ttl {
  font-weight: bold;
}
382 383 384
.modal_collaboration_user {
  margin: 0px !important;
}
藤川諒 committed
385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407
#add_user_list .user_item {
  height: 90px;
}
#add_user_list .user_item_l_chk {
  height: 100%;
  display: table;
  margin-right: 20px;
  width: 50px;
}
#add_user_list .checkbox-parts {
  position: relative;
}
#add_user_list .checkbox {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
#add_user_list .checkbox-input {
  display: none;
}
#add_user_list .checkbox-parts::before {
  display: block;
  position: absolute;
藤川諒 committed
408
  border: 2px solid #4896d6;
藤川諒 committed
409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431
  content: "";
  width: 40px;
  height: 40px;
  border-radius: 50%;
  top: 5px;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
#add_user_list .checkbox-input:checked + .checkbox-parts::after {
  display: block;
  position: absolute;
  content: "\f107";
  font: 40px FontAwesome;
  color: white;
  width: 40px;
  height: 40px;
  top: 5px;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
藤川諒 committed
432
  background: #4896d6;
藤川諒 committed
433 434 435 436 437
  border-radius: 50%;
}
#add_user_list .user_item_l {
  margin: 0 15px;
}
438
#add_user_list .chat_item_l .thumbnail {
藤川諒 committed
439 440 441 442 443 444
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
}
445
#add_user_list .user_item_l .thumbnail img {
藤川諒 committed
446 447 448 449 450
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

藤川諒 committed
451
/**************************** add user *************************/
452 453 454 455 456 457 458 459 460 461 462 463
#addUserFormInCollaboration nav {
  border: none;
}

#addUserFormInCollaboration {
  height: 100%;
  display: flex;
  flex-flow: column;
  overflow-y: auto;
}
#addUserFormInCollaboration .content {
  width: 100%;
藤川諒 committed
464 465
}

藤川諒 committed
466
/**************************** zoomin zoomout *************************/
Kim Peace committed
467
.s_ac .img_wrap {
藤川諒 committed
468 469 470 471 472 473 474
  width: 40px;
  height: 40px;
  border-radius: 5px;
  margin: 5px;
  line-height: 36px;
  text-align: center;
}
Kim Peace committed
475
.s_ac .img_wrap img {
藤川諒 committed
476 477 478 479 480 481 482
  width: 35px;
  height: 35px;
}
.s_ac {
  position: fixed;
  top: 60px;
  z-index: 2;
Kim Peace committed
483
  height: calc(100% - 180px);
藤川諒 committed
484 485 486 487 488
}
.s_ac_c {
  margin: auto 0;
}

Kim Peace committed
489 490 491 492
.coview_on_media_image_crown {
  visibility: hidden;
}

藤川諒 committed
493 494 495 496 497 498 499 500 501
/**************************** modal *************************/
#captyaModal .modal-header span,
#changeHostModal .modal-header span,
#hostRequestModal .modal-header span {
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
}
502

藤川諒 committed
503 504 505 506 507 508 509 510 511 512 513
#captyaModal .modal-body,
#changeHostModal .modal-body,
#hostRequestModal .modal-body {
  text-align: center;
}
#captyaModal .modal-footer button {
  width: 30%;
  height: 60px;
  border-radius: 10px;
}
#changeHostModal .modal-footer button,
514
#modalAddUserConfirm .modal-footer button,
藤川諒 committed
515 516 517
#hostRequestModal .modal-footer button {
  width: 50%;
  height: 50px;
藤川諒 committed
518 519
  border-radius: 5px;
}
520
#modalAddUserConfirm .chat_list h2 {
藤川諒 committed
521 522 523 524
  font-size: 20px;
}

/**************************** document *************************/
525
.start_pip_img_wrap {
藤川諒 committed
526
  width: 40px;
藤川諒 committed
527 528 529
}

/**************************** footer *************************/
Kim Peace committed
530
#collabo_footer {
藤川諒 committed
531 532
  background: #20304c;
  height: 80px;
藤川諒 committed
533 534 535
  position: fixed;
  bottom: 0;
  width: 100%;
Kim Peace committed
536
  border: none;
藤川諒 committed
537 538
  z-index: 10;
}
Kim Peace committed
539
#collabo_footer .footer-wrap {
藤川諒 committed
540 541
  margin: 0 auto;
  height: 100%;
藤川諒 committed
542
  max-width: 350px;
藤川諒 committed
543
}
Kim Peace committed
544
#collabo_footer .footer_item a {
藤川諒 committed
545 546
  display: inline-block;
}
Kim Peace committed
547
#collabo_footer .img_wrap {
藤川諒 committed
548 549 550 551 552
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 45px;
}
藤川諒 committed
553 554 555
.end:hover {
  background: #ff4747c7;
}
556
.close_img {
藤川諒 committed
557 558 559
  width: 20px;
  height: 20px;
}
藤川諒 committed
560

561
.t-icon {
藤川諒 committed
562 563
  background-repeat: no-repeat;
  background-position: center;
藤川諒 committed
564 565 566 567
  background-size: contain;
  width: 30px;
  height: 30px;
  margin: 0 10px 6px 10px;
藤川諒 committed
568
}
569
.voice {
藤川諒 committed
570
  background-image: url("../icon/icon_voice_white.svg");
藤川諒 committed
571
}
572
.voice.disable {
藤川諒 committed
573
  background-image: url("../icon/icon_voice_white_disable.svg");
藤川諒 committed
574
}
575
.pen {
藤川諒 committed
576
  background-image: url("../icon/icon_collabo_pen_white.svg");
藤川諒 committed
577
}
578
.pen.disable {
藤川諒 committed
579
  background-image: url("../icon/icon_collabo_pen_white_disable.svg");
藤川諒 committed
580
}
581
.picture {
藤川諒 committed
582
  background-image: url("../icon/icon_collabo_picture.svg");
藤川諒 committed
583
}
584
.place {
藤川諒 committed
585
  background-image: url("../icon/icon_collabo_place_white.svg");
藤川諒 committed
586
}
587
.delete {
藤川諒 committed
588
  background-image: url("../icon/icon_collabo_delete_white.svg");
藤川諒 committed
589
}
590
.rewind {
藤川諒 committed
591
  background-image: url("../icon/icon_collabo_rewind_white.svg");
藤川諒 committed
592
}
593
.forward {
藤川諒 committed
594
  background-image: url("../icon/icon_collabo_forward_white.svg");
藤川諒 committed
595
}
596
.capture {
藤川諒 committed
597
  background-image: url("../icon/icon_collabo_capture.svg");
藤川諒 committed
598
}
599
.record {
藤川諒 committed
600
  background-image: url("../icon/icon_record.svg");
藤川諒 committed
601
}
602
.record.disable {
藤川諒 committed
603
  background-image: url("../icon/icon_record_disable.svg");
藤川諒 committed
604 605 606 607 608 609 610
}

.record.disable {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
藤川諒 committed
611
  border-radius: 50%;
612
  background-color: #dd4545;
藤川諒 committed
613 614 615
  box-shadow: 0 0 20px #dd4545;
  cursor: pointer;
}
616 617
.record.disable::before,
.record.disable::after {
藤川諒 committed
618 619 620 621 622 623 624 625 626 627
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
628
  border: 1px solid #dd4545;
藤川諒 committed
629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
  animation: pulsate 2s linear infinite;
}
@keyframes pulsate {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

645
.flash-txt {
藤川諒 committed
646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664
  position: absolute;
  top: -35px;
  left: -45px;
  width: 155px;
  visibility: hidden;
}
.flash-txt.on {
  -webkit-animation: fade-in-out 2s ease forwards;
  animation: fade-in-out 2s ease forwards;
  z-index: 1;
}
.flash-txt.on p {
  font-size: 12px;
  color: #333;
  background: #f8f8f8;
  padding: 5px;
  border-radius: 5px;
}
@-webkit-keyframes fade-in-out {
665 666 667 668 669 670 671 672 673 674 675 676
  0% {
    visibility: hidden;
    opacity: 0;
  }
  50% {
    visibility: visible;
    opacity: 1;
  }
  100% {
    visibility: hidden;
    opacity: 0;
  }
藤川諒 committed
677 678
}
@keyframes fade-in-out {
679 680 681 682 683 684 685 686 687 688 689 690
  0% {
    visibility: hidden;
    opacity: 0;
  }
  50% {
    visibility: visible;
    opacity: 1;
  }
  100% {
    visibility: hidden;
    opacity: 0;
  }
藤川諒 committed
691 692 693 694
}

/**************************** footer-menu *************************/
#collabo_footer_menu {
Kim Peace committed
695
  transition: 0.7s;
藤川諒 committed
696
  height: 60px;
藤川諒 committed
697 698 699 700
  position: fixed;
  width: 100%;
  margin: 0;
  border: none;
藤川諒 committed
701
  bottom: 80px;
藤川諒 committed
702
  z-index: 3;
藤川諒 committed
703
  background: #20304c42;
藤川諒 committed
704 705
}
#collabo_footer_menu .footer_menu-wrap {
Kim Peace committed
706
  height: 40px;
藤川諒 committed
707 708 709 710 711 712 713 714 715 716
}

#collabo_footer_menu .footer_menu_item .img_wrap {
  width: 48px;
  height: 48px;
  line-height: 45px;
  border-radius: 8px;
  text-align: center;
  margin: 0 5px;
}
717 718 719 720 721 722 723

#captureRequestBtn {
  width: fit-content !important;
  padding-left: 10px;
  padding-right: 10px;
}

藤川諒 committed
724 725 726 727 728 729 730 731 732
#collabo_footer_menu .footer_menu_item .img_wrap.wide {
  width: 140px;
  height: 48px;
  line-height: 45px;
  border-radius: 8px;
  text-align: center;
  margin: 0 5px;
  color: #fff;
}
733
#collabo_footer_menu {
藤川諒 committed
734 735 736
  opacity: 1;
  animation: fadein 0.5s ease forwards;
}
737
#collabo_footer_menu.hide {
藤川諒 committed
738 739 740
  opacity: 1;
  animation: fadeout 0.5s ease forwards;
}
741 742 743
#collabo_footer .txt {
  font-size: 12px;
}
藤川諒 committed
744

Kim Peace committed
745 746
@media screen and (max-width: 768px) {
  #add_user_list .user_item_ttl {
藤川諒 committed
747 748
    font-size: 16px;
  }
Kim Peace committed
749
  #add_user_list .user_item_ttl {
藤川諒 committed
750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773
    font-size: 16px;
  }
  #add_user_list .user_item_m {
    font-size: 14px;
  }
  #add_user_list .user_item {
    height: 70px;
  }

  /* check radio */
  #add_user_list .checkbox-parts::before {
    width: 30px;
    height: 30px;
  }
  #add_user_list .checkbox-input:checked + .checkbox-parts::after {
    font: 30px FontAwesome;
    width: 30px;
    height: 30px;
  }
  #add_user_list .user_item_l_chk {
    margin-right: 15px;
    width: 30px;
  }
}
774 775

#buttonAddUser {
Lee Munkyeong committed
776
  position: inherit;
777 778
}

779
.add_user_modal {
Lee Munkyeong committed
780
  width: 80%;
781
  height: 100%;
Lee Munkyeong committed
782 783
  left: 12.5%;
  overflow: auto;
784
}
785 786

.add_user_confirm_modal {
Lee Munkyeong committed
787 788
  left: 5%;
  width: 90%;
789 790
}

791 792 793 794 795 796 797 798 799
#userInGroupListForAddUserInCollaboration > ul {
  margin-top: 0px !important;
}

#selectedUserListinCollaboration > ul {
  margin-top: 0px !important;
}

#selectedUserListinCollaboration {
800
  height: 50vh;
801 802 803
  overflow: scroll;
}

804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824
/**************************** tab *************************/
.modal-content .tabs {
  margin-top: 60px;
}

.modal-content .tab_item {
  width: calc(100% / 2);
  height: 50px;
  border-bottom: 5px solid #0070ca;
  background-color: #e0e0e0;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #323743;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.modal-content .msg_notification {
825 826
  display: none;
}
827 828 829 830 831 832 833 834 835 836 837

input[name="tab_item"] {
  display: none;
}

.modal-content .tab_content {
  display: none;
  clear: both;
  overflow: hidden;
}

838 839 840 841 842 843 844
#addUserFormInCollaboration #tab1_content,
#addUserFormInCollaboration #tab2_content {
  height: 70vh;
  overflow-y: scroll;
  overflow-x: hidden;
}

845
#tabMyGroupOnMakeRoom:checked ~ #tab1_content,
846
#tabAllGroupOnMakeRoom:checked ~ #tab2_content {
847 848 849 850
  display: block;
}

#tabMyGroupOnAddUserInCollaboration:checked ~ #tab1_content,
851
#tabAllGroupOnAddUserInCollaboration:checked ~ #tab2_content {
852 853 854 855
  display: block;
}

#tabMyGroupOnAddUser:checked ~ #tab1_content,
856
#tabAllGroupOnAddUser:checked ~ #tab2_content {
857 858 859 860
  display: block;
}

#tabMyGroup:checked ~ #tab1_content,
861
#tabAllGroup:checked ~ #tab2_content {
862 863 864 865
  display: block;
}

#tabGroup:checked ~ #tab1_content,
866
#tabDM:checked ~ #tab2_content {
867 868 869 870 871 872 873 874
  display: block;
}

.modal-content .tabs input:checked + .tab_item {
  background-color: #0070ca;
  color: #fff;
}

Lee Munkyeong committed
875 876 877 878 879 880 881
.pip_indicator {
  display: table;
  vertical-align: middle;
  font-size: xxx-large;
  top: 0px;
  width: 100%;
  height: 100vh;
882
  background-color: #20304c;
Lee Munkyeong committed
883 884 885 886 887 888
  color: azure;
  position: fixed;
  z-index: 1000;
  text-align: center;
}

889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914
.before_loading_indicator {
  display: table;
  vertical-align: middle;
  font-size: xxx-large;
  top: 0px;
  width: 100%;
  height: 100vh;
  background-color: black;
  position: fixed;
  z-index: 1001;
  text-align: center;
}

#page_loader {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  text-align: center;
  color: #fff;
  z-index: 999;
}

915
#userNameCardInCollaboration li {
藤川諒 committed
916 917 918
  list-style: none;
}

919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989
@media screen and (max-width: 768px) {
  /* chat item */
  .tab_item {
    font-size: 16px;
    margin-bottom: 1rem;
  }
  .chat_item_ttl {
    font-size: 16px;
  }
  .chat_item_ttl,
  .chat_item_num {
    font-size: 16px;
  }
  .chat_item_m {
    font-size: 14px;
  }
  .chat_item_time,
  .chat_item_unread {
    font-size: 14px;
  }
  .chat_item {
    height: 70px;
  }
  /* room button */
  .make_room_btn button,
  .make_room_confirm_btn button,
  .add_user_confirm_btn button,
  .add_user_btn button {
    font-size: 16px;
  }
  /* check radio */
  .checkbox-parts::before {
    width: 30px;
    height: 30px;
  }
  .checkbox-input:checked + .checkbox-parts::after {
    font: 30px FontAwesome;
    width: 30px;
    height: 30px;
  }
  .chat_item_l_chk {
    margin-right: 15px;
    width: 30px;
  }
  #chat_make_room_confirm .room_name h2,
  #chat_change_room_name .room_name h2 {
    font-size: 16px;
  }
  #chat_make_room_confirm .chat_list h2,
  #chat_add_user_confirm .chat_list h2 {
    font-size: 16px;
  }
  /* ルーム名入力フォーム */
  .input_name_room {
    font-size: 14px;
  }
  /* チャットルーム */
  .room_left figure img {
    width: 40px;
    height: 40px;
  }
  .room_left-text {
    margin-left: 50px;
  }
  .room_right {
    max-width: 95%;
  }
  .room_left {
    max-width: 75%;
  }
}