@charset "UTF-8"; /**************************** header *************************/ #collabo_header { height: 50px; position: fixed; top: 0; width: 100%; padding: 0 10px; background: #20304c; z-index: 10; } .collabo_nav_l { color: #fff; } .collabo_nav_r .img_wrap { width: 45px; height: 45px; } .collabo_nav_r .img_wrap img { width: 100%; height: 100%; } .breadcrumb_item:not(:last-child):after { content: ">"; margin: 0 5px; } .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; } .collabo-label { padding: 2px 5px; color: #ffffff; font-size: 18px; font-weight: bold; } /**************************** main *************************/ #collabo_main { height: calc(100vh - 130px); position: relative; margin-bottom: 80px; margin-top: 50px; } #overlay_user_list .user_list { background: #383838 !important; border: none !important; height: calc(100% - 140px); overflow-x: unset; overflow-y: scroll; } #collabo_main .user_list_wrap, #collabo_main .document_wrap, #overlay_user_list .user_list_wrap { height: 100%; background: #383838; } #collabo_main .user_list_collabo, #overlay_user_list .user_list_collabo { background: #383838; padding: 0 5px 80px 5px; overflow: auto; height: inherit; } #collabo_main .user_list .img_wrap, #overlay_user_list .user_list .img_wrap { position: absolute; top: 0; left: 0; right: 0; margin: 5px auto; height: 100%; } .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; } #collabo_main .user_list .img_wrap img, #overlay_user_list .user_list .img_wrap img { width: 80px; height: 80px; border-radius: 50%; } .noscroll { overflow: hidden; position: fixed; } .none { display: none; } #collabo_main .user_item.host:before, #overlay_user_list .user_item.host:before { content: ""; top: 0; right: 0; background: url("../icon/icon_host_tag.svg"); position: absolute; z-index: 2; width: 25px; height: 25px; margin: 5px; background-repeat: no-repeat; background-position: center; } .user_item { width: calc(50% - 20px); 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; } .user_item a { display: block; height: 100%; } #collabo_main .talking_area img { width: 60px; height: 60px; } #collabo_main .talking_area, #collabo_main .start_pip_area { position: relative; z-index: 2; } .talking_img_wrap { 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; } /**************************** overlay *************************/ .btn { background-color: transparent; border: none; width: 40px; height: 30px; margin: 5px; background-repeat: no-repeat; background-position: center; background-size: contain; } .btn.menu_btn { background-image: url("../icon/icon_collabo_menu.svg"); } .btn.user_btn { background-image: url("../icon/icon_member_white.svg"); } .btn.add_user_btn { background-image: url("../icon/icon_add_member_white.svg"); } .btn.exit_btn { background-image: url("../icon/icon_close.svg"); } .btn.start_pip_btn { background-image: url("../icon/icon_start_pip.svg"); } .btn.add_user_btn.hide, .btn.user_btn.hide { transition: 0.3s; background-image: url("../icon/icon_member_blue.svg"); } .btn.menu_btn.hide { transition: 0.3s; background-image: url("../icon/icon_close.svg"); } .overlay { transition: 0.5s; position: absolute; top: 60px; width: 100%; right: -100%; background: #383838; height: 100vh; } #add_user_list { width: 90%; height: 90%; } .fixed { position: fixed; } .overlay.slidein { top: 50px; right: 0; left: 0; background: #383838; height: 100vh; z-index: 5; width: 100%; margin: 0px auto 80px auto; overflow: scroll; } #overlay_menu { transition: 0.7s; position: absolute; top: 60px; right: 0; } #overlay_menu .item01 { opacity: 0; animation: fadein 0.5s ease forwards; } #overlay_menu .item02 { opacity: 0; animation: fadein 1s ease forwards; } #overlay_menu .item03 { opacity: 0; animation: fadein 1.5s ease forwards; } #overlay_menu .item04 { opacity: 0; animation: fadein 2s ease forwards; } #overlay_menu .item05 { opacity: 0; animation: fadein 2.5s ease forwards; } @keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeout { 0% { opacity: 1; } 100% { opacity: 0; } } #overlay_menu .item01.hide, #overlay_menu .item02.hide, #overlay_menu .item03.hide, #overlay_menu .item04.hide, #overlay_menu .item05.hide { opacity: 1; animation: fadeout 0.3s ease forwards; } .item-overlay { position: absolute; top: 0; left: 0; width: 70px; height: 70px; background: #ff8f8f4a; } /* メニュー */ #overlay_menu .menu_wrap .menu .item { width: 70px; height: 70px; background: #20304c78; position: relative; z-index: 999; } #overlay_menu .menu_wrap .menu .item.hide { z-index: 0; } #overlay_menu .menu_wrap .menu .item:hover { background: #20304c4a; } #overlay_menu .menu_wrap .menu { width: 90px; } #overlay_menu .menu_wrap .menu .item a { text-align: center; color: #fff; padding-top: 6px; } #overlay_menu .menu_wrap .menu .item span { font-size: 12px; } #overlay_menu .img_wrap { width: 35px; height: 35px; line-height: 35px; margin-bottom: 3px; } #overlay_menu .img_wrap img { width: 35px; height: 35px; } .fas.fa-wrench { color: #fff; font-size: 24px; vertical-align: middle; } /* ユーザー追加 */ #add_user_list .user_list li { list-style: none; border-bottom: 1px solid #e2e8f0; position: relative; } #add_user_list .user_list li:first-child { border-top: 1px solid #e2e8f0; } #add_user_list .chat_item_ttl { font-weight: bold; } .modal_collaboration_user { margin: 0px !important; } #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; border: 2px solid #4896d6; 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; background: #4896d6; border-radius: 50%; } #add_user_list .user_item_l { margin: 0 15px; } #add_user_list .chat_item_l .thumbnail { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; margin: 0 auto; } #add_user_list .user_item_l .thumbnail img { width: 50px; height: 50px; border-radius: 50%; } /**************************** add user *************************/ #addUserFormInCollaboration nav { border: none; } #addUserFormInCollaboration { height: 100%; display: flex; flex-flow: column; overflow-y: auto; } #addUserFormInCollaboration .content { width: 100%; } /**************************** zoomin zoomout *************************/ .s_ac .img_wrap { width: 40px; height: 40px; border-radius: 5px; margin: 5px; line-height: 36px; text-align: center; } .s_ac .img_wrap img { width: 35px; height: 35px; } .s_ac { position: fixed; top: 60px; z-index: 2; height: calc(100% - 180px); } .s_ac_c { margin: auto 0; } .coview_on_media_image_crown { visibility: hidden; } /**************************** modal *************************/ #captyaModal .modal-header span, #changeHostModal .modal-header span, #hostRequestModal .modal-header span { width: 100%; text-align: center; font-weight: bold; font-size: 20px; } #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, #modalAddUserConfirm .modal-footer button, #hostRequestModal .modal-footer button { width: 50%; height: 50px; border-radius: 5px; } #modalAddUserConfirm .chat_list h2 { font-size: 20px; } /**************************** document *************************/ .start_pip_img_wrap { width: 40px; } /**************************** footer *************************/ #collabo_footer { background: #20304c; height: 80px; position: fixed; bottom: 0; width: 100%; border: none; z-index: 10; } #collabo_footer .footer-wrap { margin: 0 auto; height: 100%; max-width: 350px; } #collabo_footer .footer_item a { display: inline-block; } #collabo_footer .img_wrap { width: 50px; height: 50px; border-radius: 50%; line-height: 45px; } .end:hover { background: #ff4747c7; } .close_img { width: 20px; height: 20px; } .t-icon { background-repeat: no-repeat; background-position: center; background-size: contain; width: 30px; height: 30px; margin: 0 10px 6px 10px; } .voice { background-image: url("../icon/icon_voice_white.svg"); } .voice.disable { background-image: url("../icon/icon_voice_white_disable.svg"); } .pen { background-image: url("../icon/icon_collabo_pen_white.svg"); } .pen.disable { background-image: url("../icon/icon_collabo_pen_white_disable.svg"); } .picture { background-image: url("../icon/icon_collabo_picture.svg"); } .place { background-image: url("../icon/icon_collabo_place_white.svg"); } .delete { background-image: url("../icon/icon_collabo_delete_white.svg"); } .rewind { background-image: url("../icon/icon_collabo_rewind_white.svg"); } .forward { background-image: url("../icon/icon_collabo_forward_white.svg"); } .capture { background-image: url("../icon/icon_collabo_capture.svg"); } .record { background-image: url("../icon/icon_record.svg"); } .record.disable { background-image: url("../icon/icon_record_disable.svg"); } .record.disable { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #dd4545; box-shadow: 0 0 20px #dd4545; cursor: pointer; } .record.disable::before, .record.disable::after { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 100%; height: 100%; border: 1px solid #dd4545; 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; } } .flash-txt { 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 { 0% { visibility: hidden; opacity: 0; } 50% { visibility: visible; opacity: 1; } 100% { visibility: hidden; opacity: 0; } } @keyframes fade-in-out { 0% { visibility: hidden; opacity: 0; } 50% { visibility: visible; opacity: 1; } 100% { visibility: hidden; opacity: 0; } } /**************************** footer-menu *************************/ #collabo_footer_menu { transition: 0.7s; height: 60px; position: fixed; width: 100%; margin: 0; border: none; bottom: 80px; z-index: 3; background: #20304c42; } #collabo_footer_menu .footer_menu-wrap { height: 40px; } #collabo_footer_menu .footer_menu_item .img_wrap { width: 48px; height: 48px; line-height: 45px; border-radius: 8px; text-align: center; margin: 0 5px; } #captureRequestBtn { width: fit-content !important; padding-left: 10px; padding-right: 10px; } #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; } #collabo_footer_menu { opacity: 1; animation: fadein 0.5s ease forwards; } #collabo_footer_menu.hide { opacity: 1; animation: fadeout 0.5s ease forwards; } #collabo_footer .txt { font-size: 12px; } @media screen and (max-width: 768px) { #add_user_list .user_item_ttl { font-size: 16px; } #add_user_list .user_item_ttl { 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; } } #buttonAddUser { position: inherit; } .add_user_modal { width: 80%; height: 100%; left: 12.5%; overflow: auto; } .add_user_confirm_modal { left: 5%; width: 90%; } #userInGroupListForAddUserInCollaboration > ul { margin-top: 0px !important; } #selectedUserListinCollaboration > ul { margin-top: 0px !important; } #selectedUserListinCollaboration { height: 50vh; overflow: scroll; } /**************************** 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 { display: none; } input[name="tab_item"] { display: none; } .modal-content .tab_content { display: none; clear: both; overflow: hidden; } #addUserFormInCollaboration #tab1_content, #addUserFormInCollaboration #tab2_content { height: 70vh; overflow-y: scroll; overflow-x: hidden; } #tabMyGroupOnMakeRoom:checked ~ #tab1_content, #tabAllGroupOnMakeRoom:checked ~ #tab2_content { display: block; } #tabMyGroupOnAddUserInCollaboration:checked ~ #tab1_content, #tabAllGroupOnAddUserInCollaboration:checked ~ #tab2_content { display: block; } #tabMyGroupOnAddUser:checked ~ #tab1_content, #tabAllGroupOnAddUser:checked ~ #tab2_content { display: block; } #tabMyGroup:checked ~ #tab1_content, #tabAllGroup:checked ~ #tab2_content { display: block; } #tabGroup:checked ~ #tab1_content, #tabDM:checked ~ #tab2_content { display: block; } .modal-content .tabs input:checked + .tab_item { background-color: #0070ca; color: #fff; } .pip_indicator { display: table; vertical-align: middle; font-size: xxx-large; top: 0px; width: 100%; height: 100vh; background-color: #20304c; color: azure; position: fixed; z-index: 1000; text-align: center; } .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; } #userNameCardInCollaboration li { list-style: none; } @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%; } }