@charset "UTF-8"; /**************************** header *************************/ #collabo_header { max-width: 1280px; height: 60px; position: fixed; top: 0; width: 100%; padding: 0 10px; background: #1d1d1d; 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%; } /**************************** main *************************/ #collabo_main { height: calc(100vh - 180px); position: relative; margin-bottom: 120px; } #collabo_main .user_list_wrap, #collabo_main .document_wrap, #overlay_user_list .user_list_wrap { height: 100%; background: #525252; } #collabo_main .user_list_collabo, #overlay_user_list .user_list_collabo { background: #525252; padding-bottom: 120px; 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.png"); position: absolute; z-index: 2; width: 64px; height: 64px; } .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%; } /**************************** overlay *************************/ .btn { background-color: transparent; border: none; width: 60px; height: 60px; background-repeat: no-repeat; background-position: center; } .btn.menu_btn { background-image: url("../icon/icon_collabo_menu.png"); } .btn.user_btn { background-image: url("../icon/icon_member_white.png"); } .btn.add_user_btn { background-image: url("../icon/icon_add_member_white.png"); } .btn.exit_btn { background-image: url("../icon/icon_close.png"); } .btn.start_pip_btn { background-image: url("../icon/icon_start_pip.png"); } .btn.menu_btn.hide, .btn.add_user_btn.hide, .btn.user_btn.hide { transition: 0.3s; background-image: url("../icon/icon_member_blue.png"); } .overlay { transition: 0.7s; position: absolute; top: 60px; width: 100%; right: -100%; background: #525252; height: 100vh; } #add_user_list{ width: 90%; height: 90%; } .fixed { position: fixed; } .overlay.slidein { top: 60px; right: 0; left: 0; background: #525252; height: 100vh; z-index: 5; width: 100%; max-width: 1280px; margin: 0 auto; } /* メニュー */ #overlay_menu .menu_wrap .menu .item { width: 50%; padding: 10px 0; } #overlay_menu .menu_wrap .menu { width: 220px; } #overlay_menu .menu_wrap .menu .item a { text-align: center; color: #fff; } #overlay_menu .img_wrap { width: 80px; height: 80px; line-height: 80px; background: #0070ca; border-radius: 8px; margin: 5px; } #overlay_menu .overlay_menu_wrap { height: calc(100vh - 180px); } /* ユーザー追加 */ #overlay_add_user_list { position: fixed; z-index: 100; top: 0; background: white; height: 70%; width: 80%; max-width: 1280px; } #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; } #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 #0070ca; 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: #0070ca; 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%; } #overlay_add_user_list a { color: #323743; } /**************************** 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; } /**************************** 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: 10px; } /**************************** footer *************************/ #collabo_footer { max-width: 1280px; background: #1d1d1d; height: 120px; margin-top: 20px; position: fixed; bottom: 0; width: 100%; border: none; z-index: 10; } #collabo_footer .footer-wrap { margin: 0 auto; height: 100%; max-width: 300px; } #collabo_footer .footer_item a { display: inline-block; } #collabo_footer .img_wrap { width: 60px; height: 60px; border-radius: 50%; line-height: 55px; } /**************************** footer-menu *************************/ #collabo_footer_menu { transition: 0.7s; max-width: 1280px; height: 70px; position: fixed; width: 100%; margin: 0; border: none; bottom: 120px; z-index: 3; } #collabo_footer_menu.hide { transition: 0.7s; } #collabo_footer_menu .footer_menu_btn { background-color: white; border: 1px solid #7a7a7a; border-radius: 5px 5px 0 0; width: 80px; height: 40px; background-image: url(../icon/icon_arrow_down.png); background-repeat: no-repeat; background-position: center; position: absolute; bottom: 70px; } #collabo_footer_menu .footer_menu_btn.hide { background-image: url(../icon/icon_arrow_up.png); } #collabo_footer_menu .footer_menu-wrap { background: #1d1d1d; 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; } #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; } @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: 80%; left: 10%; overflow: auto; } .add_user_confirm_modal { max-height: 80%; left: 5%; width: 90%; } #userInGroupListForAddUserInCollaboration > ul { margin-top: 0px !important; } #selectedUserListinCollaboration > ul { margin-top: 0px !important; } #selectedUserListinCollaboration { height: 400px; overflow: scroll; } @charset "UTF-8"; /**************************** 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; } .modal-content .tab_item:hover { opacity: 0.75; } input[name="tab_item"] { display: none; } .modal-content .tab_content { display: none; clear: both; overflow: 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; } /**************************** chat list *************************/ .modal-content .chat_list ul { padding: 0; margin-top: 1rem; } .modal-content .chat_list img { width: 90px; max-height: 60px; } .modal-content .chat_list ul li { list-style: none; border-bottom: 1px solid #e2e8f0; position: relative; } .modal-content .chat_list ul li:first-child { border-top: 1px solid #e2e8f0; } .modal-content .chat_list .chat_item_t, .chat_list .chat_item_desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .modal-content .chat_item_l { margin: 0 15px; } .modal-content .chat_item_m { white-space: nowrap; overflow: hidden; width: calc(100% - 160px); } /* リスト */ .modal-content .chat_list .chat_item:hover { background: aliceblue; } /* サムネイル画像 */ .modal-content .chat_item_l .thumbnail { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; margin: 0 auto; } .modal-content .chat_item_l .thumbnail img{ width: 50px; height: 50px; } .modal-content .chat_item_l .thumbnail4 img { width: 25px; height: 25px; float: left; } .modal-content .chat_item_l .thumbnail3 .img_wrap:nth-child(1) { width: 25px; height: 50px; position: relative; overflow: hidden; float: left; } .modal-content .chat_item_l .thumbnail3 .img_wrap:nth-child(1) img { width: 50px; height: 50px; position: absolute; left: -12px; } .modal-content .chat_item_l .thumbnail3 .img_wrap:nth-child(2) { width: 25px; height: 25px; position: relative; overflow: hidden; float: left; } .modal-content .chat_item_l .thumbnail3 .img_wrap:nth-child(2) img, .chat_item_l .thumbnail3 .img_wrap:nth-child(3) img { width: 25px; height: 30px; } .modal-content .chat_item_l .thumbnail3 .img_wrap:nth-child(3) { width: 25px; height: 25px; position: relative; overflow: hidden; float: left; } .modal-content .chat_item_l .thumbnail2 .img_wrap:nth-child(1) { width: 25px; height: 50px; position: relative; overflow: hidden; float: left; } .modal-content .chat_item_l .thumbnail2 .img_wrap:nth-child(2) { width: 25px; height: 50px; position: relative; overflow: hidden; } .modal-content .chat_item_l .thumbnail2 .img_wrap img { width: 50px; height: 50px; position: absolute; left: -12px; } .modal-content .chat_item { height: 90px; } .modal-content .chat_list li { list-style: none; } .modal-content .chat_list a { color: #323743; } .modal-content .chat_make_room a { color: #323743; } /* タイトル(グループ名、個人名) */ .modal-content .chat_item_ttl, .chat_item_num { font-weight: bold; } /**************************** make room *************************/ .modal-content .chat_list .category { text-align: left; font-size: 1.4rem; height: 30px; font-size: 16px; cursor: pointer; position: relative; line-height: 30px; background: #c4c4c4; padding-left: 10px; } .modal-content .category_name { white-space: nowrap; overflow: scroll; width: 90%; } .modal-content .chat_list .category.open::after { content: "\f106"; } .modal-content .chat_list .category::after { position: absolute; top: 0; right: 10px; content: "\f107"; font: 25px FontAwesome; } /* お気に入り */ .modal-content .star.active:before { content: "\f005"; font: 26px FontAwesome; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #F5D256; padding: 20px; } .modal-content .star.disable:before { content: "\f005"; font: 26px FontAwesome; font-family: "Font Awesome 5 Free"; font-weight: 400; color: #C4C4C4; padding: 20px; } /* メンバー選択チェックボックス */ .modal-content .chat_item_l_chk { height: 100%; display: table; margin-right: 20px; width: 50px; } .modal-content .checkbox { text-align: center; display: table-cell; vertical-align: middle; } .modal-content .checkbox-input { display: none; } .modal-content .checkbox-parts { position: relative; } .modal-content .checkbox-parts::before { display: block; position: absolute; border: 2px solid #0070ca; content: ""; width: 40px; height: 40px; border-radius: 50%; top: 5px; right: 0; bottom: 0; left: 0; margin: auto; } .modal-content .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: #0070ca; border-radius: 50%; } /* ルームボタン */ .modal-content .add_user_confirm_btn button, .modal-content .add_user_btn button { height: 60px; position: fixed; bottom: 0; width: 100%; background: #0070ca; color: #fff; border: none; font-size: 18px; max-width: 1280px; } .modal-content .select_member { font-size: 14px; } #chat_make_room_confirm .room_name, #chat_change_room_name .room_name { width: 90%; margin: 0 auto; } #chat_make_room_confirm .room_name h2, #chat_change_room_name .room_name h2 { margin-top: 20px; font-size: 18px; } #chat_make_room_confirm .chat_list h2, #chat_add_user_confirm .chat_list h2 { font-size: 18px; } #chat_make_room_confirm .chat_list, #chat_add_user_confirm .chat_list { padding: 20px 0; width: 90%; margin: 0 auto; } /* ルーム名入力フォーム */ .modal-content .input_name_room { padding-left: 10px; width: 100%; border: none; border-bottom: 1px solid #bdbdbd; height: 40px; margin-bottom: 20px; } /* ユーザーリスト */ .modal-content .user_list { position: fixed; top: 60px; background: #fff; width: 100%; overflow-x: scroll; z-index: 2; } .modal-content .user_list .user_item { margin: 10px; text-align: center; } .modal-content .user_list .user_item span { width: 60px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; } .modal-content .user_list .user_item a { color: #323743; } /* ユーザーリストフィルター */ #filter .user_item .img_wrap { position: relative; } #filter .user_item .img_wrap.filter:after { position: absolute; content: "\f107"; font: 50px FontAwesome; width: 50px; height: 50px; color: #fff; left: 5px; background: #0070ca82; border-radius: 50%; } .modal-content .user_list .user_item img { width: 50px; height: 50px; border-radius: 50%; margin: 0 auto; } .add_user_confirm_btn button { height: 60px; position: fixed; bottom: 0; width: 100%; background: #0070ca; color: #fff; border: none; font-size: 18px; max-width: 1280px; } .pip_indicator { display: table; vertical-align: middle; font-size: xxx-large; top: 0px; width: 100%; height: 100vh; background-color: steelblue; color: azure; position: fixed; z-index: 1000; text-align: center; } @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%; } }