Commit 7eef7824 by Kim Peace

Merge branch 'design/playground' into develop

# Conflicts:
#	public_new/archive_detail.html
#	public_new/chat_add_user.html
#	public_new/chat_room.html
#	public_new/collaboration.html
#	public_new/footer_collabo.html
#	public_new/js/archive.js
#	public_new/js/chat-ui.js
#	public_new/modal_chat_menu.html
#	public_new/modal_collabo_profile.html
#	public_new/template/template_open_collaboration_message.html
#	public_new/template/template_user_name_card.html
parents f779067b d298126f
...@@ -65,19 +65,19 @@ ...@@ -65,19 +65,19 @@
<div class="d-flex justify-content-around h-100"> <div class="d-flex justify-content-around h-100">
<div class="footer_item"> <div class="footer_item">
<a href="contact.html"> <a href="contact.html">
<img src="icon/icon_contact_gray.png" alt="コンタクト"> <img src="icon/icon_contact_gray.svg" alt="コンタクト">
<p>コンタクト</p> <p>コンタクト</p>
</a> </a>
</div> </div>
<div class="footer_item"> <div class="footer_item">
<a href="chat.html"> <a href="chat.html">
<img src="icon/icon_chat_gray.png" alt="チャット"> <img src="icon/icon_chat_gray.svg" alt="チャット">
<p>チャット</p> <p>チャット</p>
</a> </a>
</div> </div>
<div class="footer_item"> <div class="footer_item">
<a href="archive.html"> <a href="archive.html">
<img src="icon/icon_archive.png" alt="アーカイブ"> <img src="icon/icon_archive.svg" alt="アーカイブ">
<p class="active">アーカイブ</p> <p class="active">アーカイブ</p>
</a> </a>
</div> </div>
......
...@@ -76,7 +76,6 @@ ...@@ -76,7 +76,6 @@
<!-- view --> <!-- view -->
<script src="./js/views/contact/namecard.js"></script> <script src="./js/views/contact/namecard.js"></script>
<script src="./js/views/archive/archive.js"></script> <script src="./js/views/archive/archive.js"></script>
<script> <script>
var archiveId; var archiveId;
......
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
<div class="col-4 pl-0"> <div class="col-4 pl-0">
<div class="nav-item text-right craeteRoomButton"> <div class="nav-item text-right craeteRoomButton">
<a href="chat_make_room.html"> <a href="chat_make_room.html">
<img src="icon/icon_make_room.png" alt="ルーム開設"> <img src="icon/icon_make_room.svg" alt="ルーム開設">
</a> </a>
</div> </div>
</div><!-- .col --> </div><!-- .col -->
...@@ -78,19 +78,19 @@ ...@@ -78,19 +78,19 @@
<div class="d-flex justify-content-around h-100"> <div class="d-flex justify-content-around h-100">
<div class="footer_item"> <div class="footer_item">
<a href="contact.html"> <a href="contact.html">
<img src="icon/icon_contact_gray.png" alt="コンタクト"> <img src="icon/icon_contact_gray.svg" alt="コンタクト">
<p>コンタクト</p> <p>コンタクト</p>
</a> </a>
</div> </div>
<div class="footer_item"> <div class="footer_item">
<a href="chat.html"> <a href="chat.html">
<img src="icon/icon_chat.png" alt="チャット"> <img src="icon/icon_chat.svg" alt="チャット">
<p class="active">チャット</p> <p class="active">チャット</p>
</a> </a>
</div> </div>
<div class="footer_item"> <div class="footer_item">
<a href="archive.html"> <a href="archive.html">
<img src="icon/icon_archive_gray.png" alt="アーカイブ"> <img src="icon/icon_archive_gray.svg" alt="アーカイブ">
<p>アーカイブ</p> <p>アーカイブ</p>
</a> </a>
</div> </div>
......
...@@ -24,27 +24,26 @@ ...@@ -24,27 +24,26 @@
<div class="col-4 pr-0"> <div class="col-4 pr-0">
<div class="nav-item"> <div class="nav-item">
<div class="nav_prev"> <div class="nav_prev">
<a href="chat_room.html"><span style="font-size: 13px;">ルーム</span></a> <a href="chat_room.html"><span>ルーム</span></a>
</div> </div>
</div> </div>
</div> <div class="col-4 p-0">
<div class="col-4 p-0"> <div class="nav-item p-0">
<div class="nav-item p-0"> <h1 class="nav-ttl" id="addUserTitle">ユーザー招待</h1>
<h1 class="nav-ttl" id="addUserTitle">ユーザー招待</h1> </div>
</div>
</div>
<div class="col-4 pl-0">
<div class="nav-item text-right">
</div> </div>
</div><!-- .col --> <div class="col-4 pl-0">
</div><!-- .row --> <div class="nav-item text-right">
</div>
</div><!-- .col -->
</div><!-- .row -->
</nav><!-- nav --> </nav><!-- nav -->
<!-- コンテンツ --> <!-- コンテンツ -->
<main id="chat_add_user"> <main id="chat_add_user">
<form id="addUserForm" action="chat_add_user_confirm.html" method="post"> <form id="addUserForm" action="chat_add_user_confirm.html" method="post">
<!-- ユーザー検索 --> <!-- ユーザー検索 -->
<div class="search_form my-2"> <div class="search_form">
<input type="search" name="search" placeholder="ユーザー検索" maxlength="30"> <input type="search" name="search" placeholder="ユーザー検索" maxlength="30">
<span class="src_icon"></span> <span class="src_icon"></span>
<a href="#" class="cancel none">キャンセル</a> <a href="#" class="cancel none">キャンセル</a>
...@@ -67,18 +66,18 @@ ...@@ -67,18 +66,18 @@
<div id="myGroupListForMakeRoom"></div> <div id="myGroupListForMakeRoom"></div>
</div> </div>
</div> </div>
<div class="tab_content" id="tab2_content"> </div>
<div class="breadcrumb" id="groupPathAreaForAddUser"></div> <div class="tab_content" id="tab2_content">
<div class="chat_list"> <div class="breadcrumb" id="groupPathAreaForAddUser"></div>
<!-- 全グループ --> <div class="chat_list">
<ul class="p-0 chat_make_room_list"> <!-- 全グループ -->
<li class="d-flex align-items-center" id="rootGroupArea"> <ul class="p-0 chat_make_room_list">
<a href="#" class="w-100" id="rootGroupBtnForAddUser"> <li class="d-flex align-items-center" id="rootGroupArea">
<div class="chat_item d-flex flex-row align-items-center"> <a href="#" class="w-100" id="rootGroupBtnForAddUser">
<div class="chat_item_l"> <div class="chat_item d-flex flex-row align-items-center">
<div class="thumbnail-icon"> <div class="chat_item_l">
<img src="icon/icon_prev_top.png" alt="トップグループに戻る" /> <div class="thumbnail-icon">
</div> <img src="icon/icon_prev_top.svg" alt="トップグループに戻る" />
</div> </div>
<div class="chat_item_m px-0"> <div class="chat_item_m px-0">
<div class="d-flex flex-column"> <div class="d-flex flex-column">
...@@ -88,15 +87,15 @@ ...@@ -88,15 +87,15 @@
</div> </div>
</div> </div>
</div> </div>
</a> </div>
</li> </a>
<li class="d-flex align-items-center" id="parentGroupArea"> </li>
<a href="#" class="w-100" id="parentGroupBtnForAddUser"> <li class="d-flex align-items-center" id="parentGroupArea">
<div class="chat_item d-flex flex-row align-items-center"> <a href="#" class="w-100" id="parentGroupBtnForAddUser">
<div class="chat_item_l"> <div class="chat_item d-flex flex-row align-items-center">
<div class="thumbnail-icon"> <div class="chat_item_l">
<img src="icon/icon_prev.png" alt="上位グループに戻る" /> <div class="thumbnail-icon">
</div> <img src="icon/icon_prev.svg" alt="上位グループに戻る" />
</div> </div>
<div class="chat_item_m px-0"> <div class="chat_item_m px-0">
<div class="d-flex flex-column"> <div class="d-flex flex-column">
...@@ -106,14 +105,14 @@ ...@@ -106,14 +105,14 @@
</div> </div>
</div> </div>
</div> </div>
</a> </a>
</li> </li>
<div id="childGroupListAreaForAddUser"></div> <div id="childGroupListAreaForAddUser"></div>
<div id="userInGroupListForAddUser"></div> <div id="userInGroupListForAddUser"></div>
</ul> </ul>
</div>
</div> </div>
</div> </div>
</div>
<div class="chat_make_room"> <div class="chat_make_room">
<ul class="overlay_src_msg" style="padding-inline-start: 20px;"> <ul class="overlay_src_msg" style="padding-inline-start: 20px;">
</ul> </ul>
...@@ -169,7 +168,7 @@ ...@@ -169,7 +168,7 @@
$('.select_member_num').text('0'); $('.select_member_num').text('0');
} }
ChatAddUser.refreshMyGroupForAddUser(); ChatAddUser.refreshMyGroupForAddUser();
</script> </script>
</body> </body>
......
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
<div class="col-4 pr-0"> <div class="col-4 pr-0">
<div class="nav-item"> <div class="nav-item">
<div class="nav_prev"> <div class="nav_prev">
<a href="chat.html"><span style="font-size: 13px;">チャット</span></a> <a href="chat.html"><span>チャット</span></a>
</div> </div>
</div> </div>
</div> </div>
...@@ -77,7 +77,7 @@ ...@@ -77,7 +77,7 @@
<div class="chat_item d-flex flex-row align-items-center"> <div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l"> <div class="chat_item_l">
<div class="thumbnail"> <div class="thumbnail">
<img src="icon/icon_prev_top.png" alt="トップグループに戻る" /> <img src="icon/icon_prev_top.svg" alt="トップグループに戻る" />
</div> </div>
</div> </div>
<div class="chat_item_m px-0"> <div class="chat_item_m px-0">
...@@ -95,7 +95,7 @@ ...@@ -95,7 +95,7 @@
<div class="chat_item d-flex flex-row align-items-center"> <div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l"> <div class="chat_item_l">
<div class="thumbnail"> <div class="thumbnail">
<img src="icon/icon_prev.png" alt="上位グループに戻る" /> <img src="icon/icon_prev.svg" alt="上位グループに戻る" />
</div> </div>
</div> </div>
<div class="chat_item_m px-0"> <div class="chat_item_m px-0">
......
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
<div class="col-4 pr-0"> <div class="col-4 pr-0">
<div class="nav-item"> <div class="nav-item">
<div class="nav_prev" id="prevBtn"> <div class="nav_prev" id="prevBtn">
<a href="chat_make_room.html"><span style="font-size: 13px;">ルーム開設</span></a> <a href="chat_make_room.html"><span>ルーム開設</span></a>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -43,9 +43,9 @@ ...@@ -43,9 +43,9 @@
</div> </div>
<div class="col-4 pl-0"> <div class="col-4 pl-0">
<div class="nav-item text-right"> <div class="nav-item text-right">
<a href="#" class="search_menu mx-2"><img src="icon/icon_search.png" alt="検索"></a> <a href="#" class="search_menu mx-2"><img src="icon/icon_search.svg" alt="検索"></a>
<a href="#" data-toggle="modal" data-target="#menuModalCenter" id="roomMenu" class="none mx-1"><img <a href="#" data-toggle="modal" data-target="#menuModalCenter" class="menu-modal-btn" id="roomMenu" class="none mx-1"><img
src="icon/icon_room_menu.png" alt="メニュー"></a> src="icon/icon_room_menu.svg" alt="メニュー"></a>
</div> </div>
</div><!-- .col --> </div><!-- .col -->
</div><!-- .row --> </div><!-- .row -->
...@@ -78,13 +78,13 @@ ...@@ -78,13 +78,13 @@
<div class="footer_content_t"> <div class="footer_content_t">
<div class="d-flex flex-row h-100"> <div class="d-flex flex-row h-100">
<div class="footer_item attach_file"> <div class="footer_item attach_file">
<img src="icon/icon_camera.png" alt="写真アイコン" id="imageInputButton"> <img src="icon/icon_camera.svg" alt="写真アイコン" id="imageInputButton">
<form id="image-form"> <form id="image-form">
<input class="d-none" type="file" name="image" id="imageInputTag" accept="image/x-png,image/jpeg"> <input class="d-none" type="file" name="image" id="imageInputTag" accept="image/x-png,image/jpeg">
</form> </form>
</div> </div>
<div class="footer_item attach_file"> <div class="footer_item attach_file">
<img src="icon/icon_videocam.png" alt="動画アイコン" id="videoUploadButton"> <img src="icon/icon_videocam.svg" alt="動画アイコン" id="videoUploadButton">
<form id="video-form"> <form id="video-form">
<input class="d-none" type="file" name="image" id="videoInputTag" accept="video/mp4"> <input class="d-none" type="file" name="image" id="videoInputTag" accept="video/mp4">
</form> </form>
...@@ -100,32 +100,32 @@ ...@@ -100,32 +100,32 @@
<div class="d-flex flex-row justify-content-around h-100"> <div class="d-flex flex-row justify-content-around h-100">
<div class="footer_item"> <div class="footer_item">
<a href="javascript:ChatRoom.startCollaboration(COLLABORATION_TYPE.AUDIO);"> <a href="javascript:ChatRoom.startCollaboration(COLLABORATION_TYPE.AUDIO);">
<img src="icon/icon_phone.png" alt="通話アイコン"> <img src="icon/icon_phone.svg" alt="通話アイコン">
<p>通話</p> <p>通話</p>
</a> </a>
</div> </div>
<div class="footer_item"> <div class="footer_item">
<a href="javascript:ChatRoom.startCollaboration(COLLABORATION_TYPE.DOCUMENT);"> <a href="javascript:ChatRoom.startCollaboration(COLLABORATION_TYPE.DOCUMENT);">
<img src="icon/icon_paste.png" alt="文書アイコン"> <img src="icon/icon_paste.svg" alt="文書アイコン">
<p>文書</p> <p>文書</p>
</a> </a>
</div> </div>
<div class="footer_item"> <div class="footer_item">
<a href="javascript:ChatRoom.startCollaboration(COLLABORATION_TYPE.CAMERA);"> <a href="javascript:ChatRoom.startCollaboration(COLLABORATION_TYPE.CAMERA);">
<img src="icon/icon_photo.png" alt="画像アイコン"> <img src="icon/icon_photo.svg" alt="画像アイコン">
<p>画像</p> <p>画像</p>
</a> </a>
</div> </div>
<div class="footer_item"> <div class="footer_item">
<a href="javascript:ChatRoom.startCollaboration(COLLABORATION_TYPE.VIDEO);"> <a href="javascript:ChatRoom.startCollaboration(COLLABORATION_TYPE.VIDEO);">
<img src="icon/icon_movie.png" alt="動画アイコン"> <img src="icon/icon_movie.svg" alt="動画アイコン">
<p>動画</p> <p>動画</p>
</a> </a>
</div> </div>
<!--リリース後開発予定--> <!--リリース後開発予定-->
<div class="footer_item"> <div class="footer_item">
<a href="javascript:ChatRoom.startCollaboration(COLLABORATION_TYPE.BOARD);"> <a href="javascript:ChatRoom.startCollaboration(COLLABORATION_TYPE.BOARD);">
<img src="icon/icon_whiteboard_gray.png" alt="ホワイトボードアイコン"> <img src="icon/icon_whiteboard_gray.svg" alt="ホワイトボードアイコン">
<p>ボード</p> <p>ボード</p>
</a> </a>
</div> </div>
......
...@@ -27,13 +27,16 @@ ...@@ -27,13 +27,16 @@
<div class="d-flex align-items-center h-100"> <div class="d-flex align-items-center h-100">
<div class="collabo_nav_l text-left w-100"> <div class="collabo_nav_l text-left w-100">
<div class="d-flex flex-row"> <div class="d-flex flex-row">
<span class="collabo-label collaboration_contents voice_contents">音声</span> <span class="collabo-label collaboration_contents voice_contents">音声<span class="host_contents"> /
<span class="collabo-label collaboration_contents video_contents">動画</span> 司会者</span><span class="none"> / 参加者</span></span>
<span class="collabo-label collaboration_contents picture_contents">写真</span> <span class="collabo-label collaboration_contents video_contents">動画<span class="host_contents"> /
<span class="collabo-label collaboration_contents document_contents">文書</span> 司会者</span><span class="none"> / 参加者</span></span>
<span class="collabo-label collaboration_contents board_contents">ボード</span> <span class="collabo-label collaboration_contents picture_contents">写真<span class="host_contents"> /
<span class="mx-3 host_contents">司会者</span> 司会者</span><span class="none"> / 参加者</span></span>
<span class="mx-3 none">参加者</span> <span class="collabo-label collaboration_contents document_contents">文書<span class="host_contents"> /
司会者</span><span class="none"> / 参加者</span></span>
<span class="collabo-label collaboration_contents board_contents">ボード<span class="host_contents"> /
司会者</span><span class="none"> / 参加者</span></span>
</div> </div>
</div> </div>
<div class="collabo_nav_r"> <div class="collabo_nav_r">
...@@ -60,7 +63,7 @@ ...@@ -60,7 +63,7 @@
<div <div
class="talking_area icon_talking_wrap d-flex flex-column justify-content-center align-items-center h-100 collaboration_contents voice_contents none"> class="talking_area icon_talking_wrap d-flex flex-column justify-content-center align-items-center h-100 collaboration_contents voice_contents none">
<div class="talking_img_wrap"> <div class="talking_img_wrap">
<img src="icon/icon_talking_white.png" alt="通話中"> <img src="icon/icon_talking_white.svg" alt="通話中">
</div> </div>
<span class="text-white mt-4">通話中</span> <span class="text-white mt-4">通話中</span>
</div> </div>
...@@ -70,7 +73,7 @@ ...@@ -70,7 +73,7 @@
class="start_pip_area d-flex flex-column justify-content-center align-items-center h-100 collaboration_contents document_contents none"> class="start_pip_area d-flex flex-column justify-content-center align-items-center h-100 collaboration_contents document_contents none">
<div class="start_pip_img_wrap"> <div class="start_pip_img_wrap">
<a href="javascript:NativeBridgeDelegate.startPIPMode();"> <a href="javascript:NativeBridgeDelegate.startPIPMode();">
<img src="icon/icon_start_pip.png" alt="文書共有"> <img src="icon/icon_start_pip.svg" alt="文書共有">
</a> </a>
</div> </div>
<span class="text-white mt-2">共有する</span> <span class="text-white mt-2">共有する</span>
...@@ -107,7 +110,7 @@ ...@@ -107,7 +110,7 @@
<div id="loadingArea"></div> <div id="loadingArea"></div>
<div class="pip_indicator none" onclick="NativeBridgeDelegate.finishPIPMode();"> <div class="pip_indicator none" onclick="NativeBridgeDelegate.finishPIPMode();">
<div style="vertical-align: middle;display: table-cell;"> <div style="vertical-align: middle;display: table-cell;">
<img src="icon/icon_end_pip.png" alt="文書共有" style="width: 30px;height: 30px;"> <img src="icon/icon_end_pip.svg" alt="文書共有" style="width: 30px;height: 30px;">
<span style="font-size: 20px;vertical-align: middle;">戻る</span> <span style="font-size: 20px;vertical-align: middle;">戻る</span>
</div> </div>
</div> </div>
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<div class="item"> <div class="item">
<a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center"> <a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_picture.png" alt="写真共有"> <img src="icon/icon_collabo_picture.svg" alt="写真共有">
</div> </div>
<span>写真共有</span> <span>写真共有</span>
</a> </a>
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<div class="item"> <div class="item">
<a href="javascript:coview_api.ChangeCollaboration('video');" class="d-flex flex-column align-items-center"> <a href="javascript:coview_api.ChangeCollaboration('video');" class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_videocam.png" alt="動画共有"> <img src="icon/icon_collabo_videocam.svg" alt="動画共有">
</div> </div>
<span>動画共有</span> <span>動画共有</span>
</a> </a>
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
<div class="item"> <div class="item">
<a href="javascript:coview_api.ChangeCollaboration('docs');" class="d-flex flex-column align-items-center"> <a href="javascript:coview_api.ChangeCollaboration('docs');" class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_document.png" alt="文書共有"> <img src="icon/icon_collabo_document.svg" alt="文書共有">
</div> </div>
<span>文書共有</span> <span>文書共有</span>
</a> </a>
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
<div class="item"> <div class="item">
<a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center"> <a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_whiteboard.png" alt="落書き"> <img src="icon/icon_collabo_whiteboard.svg" alt="落書き">
</div> </div>
<span>落書き</span> <span>落書き</span>
</a> </a>
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<a href="javascript:changeCollaboration(COLLABORATION_TYPE.AUDIO);" <a href="javascript:changeCollaboration(COLLABORATION_TYPE.AUDIO);"
class="d-flex flex-column align-items-center"> class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_headset.png" alt="音声共有"> <img src="icon/icon_collabo_headset.svg" alt="音声共有">
</div> </div>
<span>音声</span> <span>音声</span>
</a> </a>
...@@ -17,8 +17,8 @@ ...@@ -17,8 +17,8 @@
<span class="item-overlay rounded-circle collaboration_contents video_contents"></span> <span class="item-overlay rounded-circle collaboration_contents video_contents"></span>
<a href="javascript:changeCollaboration(COLLABORATION_TYPE.VIDEO);" <a href="javascript:changeCollaboration(COLLABORATION_TYPE.VIDEO);"
class="d-flex flex-column align-items-center"> class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap m-0">
<img src="icon/icon_collabo_videocam.png" alt="動画共有"> <img src="icon/icon_collabo_videocam.svg" alt="動画共有">
</div> </div>
<span>動画</span> <span>動画</span>
</a> </a>
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
<a href="javascript:changeCollaboration(COLLABORATION_TYPE.CAMERA);" <a href="javascript:changeCollaboration(COLLABORATION_TYPE.CAMERA);"
class="d-flex flex-column align-items-center"> class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_picture.png" alt="写真共有"> <img src="icon/icon_collabo_picture.svg" alt="写真共有">
</div> </div>
<span>写真</span> <span>写真</span>
</a> </a>
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
<a href="javascript:changeCollaboration(COLLABORATION_TYPE.DOCUMENT);" <a href="javascript:changeCollaboration(COLLABORATION_TYPE.DOCUMENT);"
class="d-flex flex-column align-items-center"> class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_document.png" alt="文書共有"> <img src="icon/icon_collabo_document.svg" alt="文書共有">
</div> </div>
<span>文書</span> <span>文書</span>
</a> </a>
...@@ -47,8 +47,8 @@ ...@@ -47,8 +47,8 @@
<span class="item-overlay rounded-circle collaboration_contents board_contents"></span> <span class="item-overlay rounded-circle collaboration_contents board_contents"></span>
<a href="javascript:changeCollaboration(COLLABORATION_TYPE.BOARD);" <a href="javascript:changeCollaboration(COLLABORATION_TYPE.BOARD);"
class="d-flex flex-column align-items-center"> class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap m-0">
<img src="icon/icon_collabo_whiteboard.png" alt="落書き"> <img src="icon/icon_collabo_whiteboard.svg" alt="落書き">
</div> </div>
<span>ボード</span> <span>ボード</span>
</a> </a>
......
...@@ -74,28 +74,28 @@ ...@@ -74,28 +74,28 @@
<div class="footer_menu_item photo_select_button host_contents"> <div class="footer_menu_item photo_select_button host_contents">
<a href="#"> <a href="#">
<div class="img_wrap bg_blue" id="photo_open_place_holder"> <div class="img_wrap bg_blue" id="photo_open_place_holder">
<img src="icon/icon_collabo_picture.png" alt="写真"> <img src="icon/icon_collabo_picture.svg" alt="写真">
</div> </div>
</a> </a>
</div> </div>
<div class="footer_menu_item"> <div class="footer_menu_item">
<a href="#"> <a href="#">
<div class="img_wrap bg_red" id="penBtn"> <div class="img_wrap bg_red" id="penBtn">
<img src="icon/icon_collabo_pen_white.png" alt="ペン"> <img src="icon/icon_collabo_pen_white.svg" alt="ペン">
</div> </div>
</a> </a>
</div> </div>
<div class="footer_menu_item none"> <div class="footer_menu_item none">
<a href="#"> <a href="#">
<div class="img_wrap bg_blue"> <div class="img_wrap bg_blue">
<img src="icon/icon_collabo_place_white.png" alt="場所"> <img src="icon/icon_collabo_place_white.svg" alt="場所">
</div> </div>
</a> </a>
</div> </div>
<div class="footer_menu_item"> <div class="footer_menu_item">
<a href="#"> <a href="#">
<div class="img_wrap bg_blue" id="eraserBtn"> <div class="img_wrap bg_blue" id="eraserBtn">
<img src="icon/icon_collabo_delete_white.png" alt="削除"> <img src="icon/icon_collabo_delete_white.svg" alt="削除">
</div> </div>
</a> </a>
</div> </div>
...@@ -104,14 +104,14 @@ ...@@ -104,14 +104,14 @@
<div class="footer_menu_item"> <div class="footer_menu_item">
<a href="#"> <a href="#">
<div class="img_wrap bg_gray"> <div class="img_wrap bg_gray">
<img src="icon/icon_collabo_rewind_white.png" alt="戻る"> <img src="icon/icon_collabo_rewind_white.svg" alt="戻る">
</div> </div>
</a> </a>
</div> </div>
<div class="footer_menu_item"> <div class="footer_menu_item">
<a href="#"> <a href="#">
<div class="img_wrap bg_gray"> <div class="img_wrap bg_gray">
<img src="icon/icon_collabo_forward_white.png" alt="進む"> <img src="icon/icon_collabo_forward_white.svg" alt="進む">
</div> </div>
</a> </a>
</div> </div>
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<a href="javascript:changeCollaboration(COLLABORATION_TYPE.AUDIO);" <a href="javascript:changeCollaboration(COLLABORATION_TYPE.AUDIO);"
class="d-flex flex-column align-items-center"> class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_headset.png" alt="音声共有"> <img src="icon/icon_collabo_headset.svg" alt="音声共有">
</div> </div>
<span>音声共有</span> <span>音声共有</span>
</a> </a>
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<a href="javascript:changeCollaboration(COLLABORATION_TYPE.VIDEO);" <a href="javascript:changeCollaboration(COLLABORATION_TYPE.VIDEO);"
class="d-flex flex-column align-items-center"> class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_videocam.png" alt="動画共有"> <img src="icon/icon_collabo_videocam.svg" alt="動画共有">
</div> </div>
<span>動画共有</span> <span>動画共有</span>
</a> </a>
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<a href="javascript:coview_api.ChangeCollaboration('image');" <a href="javascript:coview_api.ChangeCollaboration('image');"
class="d-flex flex-column align-items-center"> class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_picture.png" alt="写真共有"> <img src="icon/icon_collabo_picture.svg" alt="写真共有">
</div> </div>
<span>写真共有</span> <span>写真共有</span>
</a> </a>
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
<a href="javascript:changeCollaboration(COLLABORATION_TYPE.DOCUMENT);" <a href="javascript:changeCollaboration(COLLABORATION_TYPE.DOCUMENT);"
class="d-flex flex-column align-items-center"> class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_document.png" alt="文書共有"> <img src="icon/icon_collabo_document.svg" alt="文書共有">
</div> </div>
<span>文書共有</span> <span>文書共有</span>
</a> </a>
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
<a href="javascript:changeCollaboration(COLLABORATION_TYPE.BOARD);" <a href="javascript:changeCollaboration(COLLABORATION_TYPE.BOARD);"
class="d-flex flex-column align-items-center"> class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_whiteboard.png" alt="落書き"> <img src="icon/icon_collabo_whiteboard.svg" alt="落書き">
</div> </div>
<span>落書き</span> <span>落書き</span>
</a> </a>
......
...@@ -76,21 +76,21 @@ ...@@ -76,21 +76,21 @@
<div class="footer_menu_item"> <div class="footer_menu_item">
<a href="#"> <a href="#">
<div class="img_wrap bg_red" id="penBtn"> <div class="img_wrap bg_red" id="penBtn">
<img src="icon/icon_collabo_pen_white.png" alt="ペン"> <img src="icon/icon_collabo_pen_white.svg" alt="ペン">
</div> </div>
</a> </a>
</div> </div>
<div class="footer_menu_item none"> <div class="footer_menu_item none">
<a href="#"> <a href="#">
<div class="img_wrap bg_blue"> <div class="img_wrap bg_blue">
<img src="icon/icon_collabo_place_white.png" alt="場所"> <img src="icon/icon_collabo_place_white.svg" alt="場所">
</div> </div>
</a> </a>
</div> </div>
<div class="footer_menu_item"> <div class="footer_menu_item">
<a href="#"> <a href="#">
<div class="img_wrap bg_blue" id="eraserBtn"> <div class="img_wrap bg_blue" id="eraserBtn">
<img src="icon/icon_collabo_delete_white.png" alt="削除"> <img src="icon/icon_collabo_delete_white.svg" alt="削除">
</div> </div>
</a> </a>
</div> </div>
...@@ -100,7 +100,7 @@ ...@@ -100,7 +100,7 @@
<!-- <a href="#" data-toggle="modal" data-target="#captyaModal">--> <!-- <a href="#" data-toggle="modal" data-target="#captyaModal">-->
<a href="#"> <a href="#">
<div class="img_wrap wide bg_blue" id="captureBtn"> <div class="img_wrap wide bg_blue" id="captureBtn">
<img src="icon/icon_collabo_capture.png" alt="キャプチャ"> <img src="icon/icon_collabo_capture.svg" alt="キャプチャ">
<span>キャプチャ</span> <span>キャプチャ</span>
</div> </div>
</a> </a>
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<div class="item rounded-circle shadow m-2 item01"> <div class="item rounded-circle shadow m-2 item01">
<a href="javascript:coview_api.ChangeCollaboration('audio');" class="d-flex flex-column align-items-center"> <a href="javascript:coview_api.ChangeCollaboration('audio');" class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_headset.png" alt="音声共有"> <img src="icon/icon_collabo_headset.svg" alt="音声共有">
</div> </div>
<span>音声共有</span> <span>音声共有</span>
</a> </a>
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<div class="item rounded-circle shadow m-2 item02"> <div class="item rounded-circle shadow m-2 item02">
<a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center"> <a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_picture.png" alt="写真共有"> <img src="icon/icon_collabo_picture.svg" alt="写真共有">
</div> </div>
<span>写真共有</span> <span>写真共有</span>
</a> </a>
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
<div class="item rounded-circle shadow m-2 item03"> <div class="item rounded-circle shadow m-2 item03">
<a href="javascript:coview_api.ChangeCollaboration('docs');" class="d-flex flex-column align-items-center"> <a href="javascript:coview_api.ChangeCollaboration('docs');" class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_document.png" alt="文書共有"> <img src="icon/icon_collabo_document.svg" alt="文書共有">
</div> </div>
<span>文書共有</span> <span>文書共有</span>
</a> </a>
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
<div class="item rounded-circle shadow m-2 item04"> <div class="item rounded-circle shadow m-2 item04">
<a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center"> <a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_whiteboard.png" alt="落書き"> <img src="icon/icon_collabo_whiteboard.svg" alt="落書き">
</div> </div>
<span>落書き</span> <span>落書き</span>
</a> </a>
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<div class="item rounded-circle shadow m-2 item01"> <div class="item rounded-circle shadow m-2 item01">
<a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center"> <a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_picture.png" alt="写真共有"> <img src="icon/icon_collabo_picture.svg" alt="写真共有">
</div> </div>
<span>写真共有</span> <span>写真共有</span>
</a> </a>
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<div class="item rounded-circle shadow m-2 item02"> <div class="item rounded-circle shadow m-2 item02">
<a href="javascript:coview_api.ChangeCollaboration('video');" class="d-flex flex-column align-items-center"> <a href="javascript:coview_api.ChangeCollaboration('video');" class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_videocam.png" alt="動画共有"> <img src="icon/icon_collabo_videocam.svg" alt="動画共有">
</div> </div>
<span>動画共有</span> <span>動画共有</span>
</a> </a>
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
<div class="item rounded-circle shadow m-2 item03"> <div class="item rounded-circle shadow m-2 item03">
<a href="javascript:coview_api.ChangeCollaboration('docs');" class="d-flex flex-column align-items-center"> <a href="javascript:coview_api.ChangeCollaboration('docs');" class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_document.png" alt="文書共有"> <img src="icon/icon_collabo_document.svg" alt="文書共有">
</div> </div>
<span>文書共有</span> <span>文書共有</span>
</a> </a>
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
<div class="item rounded-circle shadow m-2 item04"> <div class="item rounded-circle shadow m-2 item04">
<a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center"> <a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_whiteboard.png" alt="落書き"> <img src="icon/icon_collabo_whiteboard.svg" alt="落書き">
</div> </div>
<span>落書き</span> <span>落書き</span>
</a> </a>
......
...@@ -73,21 +73,21 @@ ...@@ -73,21 +73,21 @@
<div class="footer_menu_item"> <div class="footer_menu_item">
<a href="#"> <a href="#">
<div class="img_wrap bg_red" id="penBtn"> <div class="img_wrap bg_red" id="penBtn">
<img src="icon/icon_collabo_pen_white.png" alt="ペン"> <img src="icon/icon_collabo_pen_white.svg" alt="ペン">
</div> </div>
</a> </a>
</div> </div>
<div class="footer_menu_item none"> <div class="footer_menu_item none">
<a href="#"> <a href="#">
<div class="img_wrap bg_blue"> <div class="img_wrap bg_blue">
<img src="icon/icon_collabo_place_white.png" alt="場所"> <img src="icon/icon_collabo_place_white.svg" alt="場所">
</div> </div>
</a> </a>
</div> </div>
<div class="footer_menu_item"> <div class="footer_menu_item">
<a href="#"> <a href="#">
<div class="img_wrap bg_blue" id="eraserBtn"> <div class="img_wrap bg_blue" id="eraserBtn">
<img src="icon/icon_collabo_delete_white.png" alt="削除"> <img src="icon/icon_collabo_delete_white.svg" alt="削除">
</div> </div>
</a> </a>
</div> </div>
...@@ -96,14 +96,14 @@ ...@@ -96,14 +96,14 @@
<div class="footer_menu_item"> <div class="footer_menu_item">
<a href="#"> <a href="#">
<div class="img_wrap bg_gray"> <div class="img_wrap bg_gray">
<img src="icon/icon_collabo_rewind_white.png" alt="戻る"> <img src="icon/icon_collabo_rewind_white.svg" alt="戻る">
</div> </div>
</a> </a>
</div> </div>
<div class="footer_menu_item"> <div class="footer_menu_item">
<a href="#"> <a href="#">
<div class="img_wrap bg_gray"> <div class="img_wrap bg_gray">
<img src="icon/icon_collabo_forward_white.png" alt="進む"> <img src="icon/icon_collabo_forward_white.svg" alt="進む">
</div> </div>
</a> </a>
</div> </div>
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<div class="item"> <div class="item">
<a href="javascript:coview_api.ChangeCollaboration('audio');" class="d-flex flex-column align-items-center"> <a href="javascript:coview_api.ChangeCollaboration('audio');" class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_headset.png" alt="音声共有"> <img src="icon/icon_collabo_headset.svg" alt="音声共有">
</div> </div>
<span>音声共有</span> <span>音声共有</span>
</a> </a>
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<div class="item"> <div class="item">
<a href="javascript:coview_api.ChangeCollaboration('video');" class="d-flex flex-column align-items-center"> <a href="javascript:coview_api.ChangeCollaboration('video');" class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_videocam.png" alt="動画共有"> <img src="icon/icon_collabo_videocam.svg" alt="動画共有">
</div> </div>
<span>動画共有</span> <span>動画共有</span>
</a> </a>
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
<div class="item"> <div class="item">
<a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center"> <a href="javascript:coview_api.ChangeCollaboration('image');" class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_picture.png" alt="写真共有"> <img src="icon/icon_collabo_picture.svg" alt="写真共有">
</div> </div>
<span>写真共有</span> <span>写真共有</span>
</a> </a>
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
<div class="item"> <div class="item">
<a href="javascript:coview_api.ChangeCollaboration('docs');" class="d-flex flex-column align-items-center"> <a href="javascript:coview_api.ChangeCollaboration('docs');" class="d-flex flex-column align-items-center">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_collabo_document.png" alt="文書共有"> <img src="icon/icon_collabo_document.svg" alt="文書共有">
</div> </div>
<span>文書共有</span> <span>文書共有</span>
</a> </a>
......
...@@ -101,7 +101,7 @@ ...@@ -101,7 +101,7 @@
<div class="chat_item d-flex flex-row align-items-center"> <div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l"> <div class="chat_item_l">
<div class="thumbnail-icon"> <div class="thumbnail-icon">
<img src="icon/icon_prev_top.png" alt="トップグループに戻る" /> <img src="icon/icon_prev_top.svg" alt="トップグループに戻る" />
</div> </div>
</div> </div>
<div class="chat_item_m px-0"> <div class="chat_item_m px-0">
...@@ -119,7 +119,7 @@ ...@@ -119,7 +119,7 @@
<div class="chat_item d-flex flex-row align-items-center"> <div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l"> <div class="chat_item_l">
<div class="thumbnail-icon"> <div class="thumbnail-icon">
<img src="icon/icon_prev.png" alt="上位グループに戻る" /> <img src="icon/icon_prev.svg" alt="上位グループに戻る" />
</div> </div>
</div> </div>
<div class="chat_item_m px-0"> <div class="chat_item_m px-0">
...@@ -151,19 +151,19 @@ ...@@ -151,19 +151,19 @@
<div class="d-flex justify-content-around h-100"> <div class="d-flex justify-content-around h-100">
<div class="footer_item"> <div class="footer_item">
<a href="contact.html"> <a href="contact.html">
<img src="icon/icon_contact.png" alt="コンタクト"> <img src="icon/icon_contact.svg" alt="コンタクト">
<p class="active">コンタクト</p> <p class="active">コンタクト</p>
</a> </a>
</div> </div>
<div class="footer_item"> <div class="footer_item">
<a href="chat.html"> <a href="chat.html">
<img src="icon/icon_chat_gray.png" alt="チャット"> <img src="icon/icon_chat_gray.svg" alt="チャット">
<p>チャット</p> <p>チャット</p>
</a> </a>
</div> </div>
<div class="footer_item"> <div class="footer_item">
<a href="archive.html"> <a href="archive.html">
<img src="icon/icon_archive_gray.png" alt="アーカイブ"> <img src="icon/icon_archive_gray.svg" alt="アーカイブ">
<p>アーカイブ</p> <p>アーカイブ</p>
</a> </a>
</div> </div>
......
...@@ -11,8 +11,8 @@ ...@@ -11,8 +11,8 @@
line-height: 46px; line-height: 46px;
} }
.arhive_img img { .arhive_img img {
width: 40px; width: 30px;
height: 40px; height: 30px;
} }
.archive_list ul li { .archive_list ul li {
list-style: none; list-style: none;
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
background: aliceblue; background: aliceblue;
} }
.bg_blue { .bg_blue {
background: #0070ca; background: #4896d6;
} }
.bg_green { .bg_green {
background: #4dca00; background: #4dca00;
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
.archive_name span { .archive_name span {
color: #323743; color: #323743;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: bold;
} }
.archive_name { .archive_name {
white-space: nowrap; white-space: nowrap;
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
.tab_item { .tab_item {
width: calc(100% / 2); width: calc(100% / 2);
height: 50px; height: 50px;
border-bottom: 5px solid #0070ca; border-bottom: 5px solid #4896d6;
background-color: #e0e0e0; background-color: #e0e0e0;
line-height: 50px; line-height: 50px;
font-size: 16px; font-size: 16px;
...@@ -23,9 +23,6 @@ ...@@ -23,9 +23,6 @@
.msg_notification { .msg_notification {
display: none; display: none;
} }
.tab_item:hover {
opacity: 0.75;
}
input[name="tab_item"] { input[name="tab_item"] {
display: none; display: none;
...@@ -63,7 +60,7 @@ input[name="tab_item"] { ...@@ -63,7 +60,7 @@ input[name="tab_item"] {
} }
.tabs input:checked + .tab_item { .tabs input:checked + .tab_item {
background-color: #0070ca; background-color: #4896d6;
color: #fff; color: #fff;
} }
...@@ -207,7 +204,7 @@ input[name="tab_item"] { ...@@ -207,7 +204,7 @@ input[name="tab_item"] {
/* タイトル(グループ名、個人名) */ /* タイトル(グループ名、個人名) */
.chat_item_ttl, .chat_item_ttl,
.chat_item_num { .chat_item_num {
font-weight: bold; font-weight: 800;
} }
/* 投稿時間 */ /* 投稿時間 */
.chat_item_time { .chat_item_time {
...@@ -241,10 +238,10 @@ input[name="tab_item"] { ...@@ -241,10 +238,10 @@ input[name="tab_item"] {
cursor: pointer; cursor: pointer;
position: relative; position: relative;
line-height: 40px; line-height: 40px;
background: #0070ca2b; background: #4896d638;
padding-left: 10px; padding-left: 10px;
border-top: 1px solid #0070ca21; border-top: 1px solid #4896d659;
border-bottom: 1px solid #0070ca21; border-bottom: 1px solid #4896d659;
} }
.category_name { .category_name {
white-space: nowrap; white-space: nowrap;
...@@ -265,7 +262,7 @@ input[name="tab_item"] { ...@@ -265,7 +262,7 @@ input[name="tab_item"] {
/* お気に入り */ /* お気に入り */
.star.active:before { .star.active:before {
content: "\f005"; content: "\f005";
font: 26px FontAwesome; font: 30px FontAwesome;
font-family: "Font Awesome 5 Free"; font-family: "Font Awesome 5 Free";
font-weight: 900; font-weight: 900;
color: #F5D256; color: #F5D256;
...@@ -273,10 +270,10 @@ input[name="tab_item"] { ...@@ -273,10 +270,10 @@ input[name="tab_item"] {
} }
.star.disable:before { .star.disable:before {
content: "\f005"; content: "\f005";
font: 26px FontAwesome; font: 30px FontAwesome;
font-family: "Font Awesome 5 Free"; font-family: "Font Awesome 5 Free";
font-weight: 400; font-weight: 400;
color: #C4C4C4; color: #707070;
padding: 20px; padding: 20px;
} }
...@@ -302,7 +299,7 @@ input[name="tab_item"] { ...@@ -302,7 +299,7 @@ input[name="tab_item"] {
.checkbox-parts::before { .checkbox-parts::before {
display: block; display: block;
position: absolute; position: absolute;
border: 2px solid #0070ca; border: 2px solid #4896d6;
content: ""; content: "";
width: 40px; width: 40px;
height: 40px; height: 40px;
...@@ -326,7 +323,7 @@ input[name="tab_item"] { ...@@ -326,7 +323,7 @@ input[name="tab_item"] {
bottom: 0; bottom: 0;
left: 0; left: 0;
margin: auto; margin: auto;
background: #0070ca; background: #4896d6;
border-radius: 50%; border-radius: 50%;
} }
...@@ -339,7 +336,7 @@ input[name="tab_item"] { ...@@ -339,7 +336,7 @@ input[name="tab_item"] {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
background: #0070ca; background: #4896d6;
color: #fff; color: #fff;
border: none; border: none;
font-size: 18px; font-size: 18px;
...@@ -386,10 +383,11 @@ input[name="tab_item"] { ...@@ -386,10 +383,11 @@ input[name="tab_item"] {
text-align: center; text-align: center;
height: 48px; height: 48px;
width: 172px; width: 172px;
background: #0070ca; background: #4896d6;
color: #fff; color: #fff;
border: none; border: none;
font-size: 18px; font-size: 18px;
border-radius: 5px;
} }
/**************************** chat room *************************/ /**************************** chat room *************************/
...@@ -413,7 +411,7 @@ input[name="tab_item"] { ...@@ -413,7 +411,7 @@ input[name="tab_item"] {
position: absolute; position: absolute;
top: 23px; top: 23px;
left: 10px; left: 10px;
background-image: url("../icon/icon_search.png"); background-image: url("../icon/icon_search.svg");
background-size: contain; background-size: contain;
width: 16px; width: 16px;
height: 16px; height: 16px;
...@@ -652,7 +650,7 @@ input[name="tab_item"] { ...@@ -652,7 +650,7 @@ input[name="tab_item"] {
.room_right .text { .room_right .text {
padding: 10px; padding: 10px;
border-radius: 8px; border-radius: 8px;
background-color: #0070ca; background-color: #4896d6;
color: #fff; color: #fff;
margin: 0; margin: 0;
margin-left: 110px; margin-left: 110px;
...@@ -665,9 +663,9 @@ input[name="tab_item"] { ...@@ -665,9 +663,9 @@ input[name="tab_item"] {
position: absolute; position: absolute;
right: -10px; right: -10px;
top: 5px; top: 5px;
border-left: 10px solid #0070ca; border-left: 10px solid #4896d6;
border-right: 10px solid transparent; border-right: 10px solid transparent;
border-top: 10px solid #0070ca; border-top: 10px solid #4896d6;
border-bottom: 10px solid transparent; border-bottom: 10px solid transparent;
} }
/* 日付 */ /* 日付 */
...@@ -754,7 +752,7 @@ input[name="tab_item"] { ...@@ -754,7 +752,7 @@ input[name="tab_item"] {
.collabo_area .collabo_btn button { .collabo_area .collabo_btn button {
width: 100%; width: 100%;
line-height: 45px; line-height: 45px;
background: #0070ca; background: #4896d6;
border: none; border: none;
color: #fff; color: #fff;
border-radius: 25px; border-radius: 25px;
...@@ -764,6 +762,11 @@ input[name="tab_item"] { ...@@ -764,6 +762,11 @@ input[name="tab_item"] {
.collabo_area.disable .collabo_btn button { .collabo_area.disable .collabo_btn button {
background: #5b666f; background: #5b666f;
} }
.collabo_area .collabo_btn button img {
width: 25px;
height: 25px;
margin-right: 10px;
}
.message_input_send { .message_input_send {
border-radius: 8px; border-radius: 8px;
...@@ -781,12 +784,57 @@ input[name="tab_item"] { ...@@ -781,12 +784,57 @@ input[name="tab_item"] {
} }
/**************************** modal *************************/ /**************************** modal *************************/
#menuModalCenter {
width: 70% !important;
margin-left: 15% !important;
}
/* メニューモーダル */ /* メニューモーダル */
.modal-backdrop{
background-color: #F9F9F9;
}
.modal-backdrop.show{
opacity: 0.95;
}
.menu_modal .modal-dialog{
max-width: 100%!important;
}
.profile_modal .modal-content{
border:none!important;
background-color:transparent!important;
}
.menu_modal .modal-content{
border:none!important;
background-color:transparent!important;
}
.modal-content-wrap {
width: 100%;
height: 100vh;
pointer-events: auto;
}
.menu_modal .modal-header .close{
padding: 0.8rem 0.8rem!important;
margin: 0!important;
}
.profile_modal button.close,
.menu_modal button.close{
position: fixed;
top: 30px;
right: 30px;
outline: 0;
}
.menu_modal button.close{
opacity: 0;
animation: fadein .5s ease forwards;
}
.profile_modal .close,
.menu_modal .close{
color: #707070;
opacity: 1!important;
}
.menu_modal .modal-body {
padding: 1rem!important;
display: flex!important;
justify-content: center!important;
align-items: center!important;
height: 100%!important;
width: 100%!important;
}
.modal-body #modal_image { .modal-body #modal_image {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -795,22 +843,51 @@ input[name="tab_item"] { ...@@ -795,22 +843,51 @@ input[name="tab_item"] {
.menu_modal .modal-body ul { .menu_modal .modal-body ul {
list-style: none; list-style: none;
padding-left: 0; padding-left: 0;
width: 100%;
} }
.menu_modal .modal-body ul li img { .menu_modal .modal-body ul li img {
max-width: 28px; max-width: 26px;
max-height: 28px;
width: 100%; width: 100%;
height: auto; height: 50px;
margin-right: 10px; margin-right: 10px;
} }
.menu_modal .modal-body ul li { .menu_modal .modal-body ul li {
border-bottom: 1px solid #c6c6c6; width: 90%;
height: 50px; max-width: 500px;
margin: 0 auto 20px auto;
border-radius: 5px;
text-align: center;
background: #ffffff;
}
.menu_modal .modal-body ul li.item01{
opacity: 0;
animation: fadein .5s ease forwards;
}
.menu_modal .modal-body ul li.item02{
opacity: 0;
animation: fadein 1s ease forwards;
}
.menu_modal .modal-body ul li.item03{
opacity: 0;
animation: fadein 1.5s ease forwards;
}
.profile_modal .modal-content.item01{
opacity: 0;
animation: fadein .5s ease forwards;
}
@keyframes fadein{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
} }
.menu_modal .modal-body ul li a { .menu_modal .modal-body ul li a {
line-height: 50px; line-height: 50px;
display: block; display: block;
color: #323743; color: #707070;
padding: 5px 10px;
} }
.menu_modal .modal-body ul li a:hover { .menu_modal .modal-body ul li a:hover {
background: aliceblue; background: aliceblue;
......
...@@ -39,7 +39,7 @@ footer .footer_item img { ...@@ -39,7 +39,7 @@ footer .footer_item img {
height: 32px; height: 32px;
} }
footer .footer_content_b .footer_item .active { footer .footer_content_b .footer_item .active {
color: #0070CA; color: #4896d6;
font-weight: bold; font-weight: bold;
} }
footer .footer_item a { footer .footer_item a {
......
...@@ -36,13 +36,9 @@ ...@@ -36,13 +36,9 @@
.menu-icon.hover .menu-bar3 {-webkit-transform: rotate(-45deg) scaleX(0.7);margin-top: 22px;} .menu-icon.hover .menu-bar3 {-webkit-transform: rotate(-45deg) scaleX(0.7);margin-top: 22px;}
.collabo-label { .collabo-label {
border: 1px solid #fff;
width: fit-content;
padding: 2px 5px; padding: 2px 5px;
border-radius: 5px; color: #ffffff;
background: #fff; font-size: 18px;
color: #20304c;
font-size: 14px;
font-weight: bold; font-weight: bold;
} }
...@@ -113,11 +109,12 @@ ...@@ -113,11 +109,12 @@
content: ""; content: "";
top: 0; top: 0;
right: 0; right: 0;
background: url("../icon/icon_host_tag.png"); background: url("../icon/icon_host_tag.svg");
position: absolute; position: absolute;
z-index: 2; z-index: 2;
width: 50px; width: 25px;
height: 50px; height: 25px;
margin: 5px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
} }
...@@ -176,43 +173,40 @@ pointer-events: none; ...@@ -176,43 +173,40 @@ pointer-events: none;
animation: pulsate 2s linear infinite; animation: pulsate 2s linear infinite;
} }
/**************************** overlay *************************/ /**************************** overlay *************************/
.btn { .btn {
background-color: transparent; background-color: transparent;
border: none; border: none;
width: 50px; width: 40px;
height: 50px; height: 30px;
margin: 5px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: contain; background-size: contain;
} }
.btn.menu_btn { .btn.menu_btn {
background-image: url("../icon/icon_collabo_menu.png"); background-image: url("../icon/icon_collabo_menu.svg");
} }
.btn.user_btn { .btn.user_btn {
background-image: url("../icon/icon_member_white.png"); background-image: url("../icon/icon_member_white.svg");
} }
.btn.add_user_btn { .btn.add_user_btn {
background-image: url("../icon/icon_add_member_white.png"); background-image: url("../icon/icon_add_member_white.svg");
} }
.btn.exit_btn { .btn.exit_btn {
background-image: url("../icon/icon_close.png"); background-image: url("../icon/icon_close.svg");
} }
.btn.start_pip_btn { .btn.start_pip_btn {
background-image: url("../icon/icon_start_pip.png"); background-image: url("../icon/icon_start_pip.svg");
} }
.btn.add_user_btn.hide, .btn.add_user_btn.hide,
.btn.user_btn.hide { .btn.user_btn.hide {
transition: 0.3s; transition: 0.3s;
background-image: url("../icon/icon_member_blue.png"); background-image: url("../icon/icon_member_blue.svg");
} }
.btn.menu_btn.hide { .btn.menu_btn.hide {
transition: 0.3s; transition: 0.3s;
background-image: url("../icon/icon_close.png"); background-image: url("../icon/icon_close.svg");
} }
.overlay { .overlay {
transition: 0.5s; transition: 0.5s;
...@@ -283,9 +277,7 @@ animation: pulsate 2s linear infinite; ...@@ -283,9 +277,7 @@ animation: pulsate 2s linear infinite;
opacity: 0; opacity: 0;
} }
} }
/* #overlay_menu.hide {
display: none;
} */
#overlay_menu .item01.hide, #overlay_menu .item01.hide,
#overlay_menu .item02.hide, #overlay_menu .item02.hide,
#overlay_menu .item03.hide, #overlay_menu .item03.hide,
...@@ -323,19 +315,20 @@ animation: pulsate 2s linear infinite; ...@@ -323,19 +315,20 @@ animation: pulsate 2s linear infinite;
#overlay_menu .menu_wrap .menu .item a { #overlay_menu .menu_wrap .menu .item a {
text-align: center; text-align: center;
color: #fff; color: #fff;
padding-top: 6px;
} }
#overlay_menu .menu_wrap .menu .item span{ #overlay_menu .menu_wrap .menu .item span{
font-size:12px; font-size:12px;
} }
#overlay_menu .img_wrap { #overlay_menu .img_wrap {
width: 40px; width: 35px;
height: 40px; height: 35px;
line-height: 40px; line-height: 35px;
border-radius: 8px; margin-bottom: 3px;
} }
#overlay_menu .img_wrap img { #overlay_menu .img_wrap img {
width: 40px; width: 35px;
height: 40px; height: 35px;
} }
.fas.fa-wrench{ .fas.fa-wrench{
color: #fff; color: #fff;
...@@ -389,7 +382,7 @@ animation: pulsate 2s linear infinite; ...@@ -389,7 +382,7 @@ animation: pulsate 2s linear infinite;
#add_user_list .checkbox-parts::before { #add_user_list .checkbox-parts::before {
display: block; display: block;
position: absolute; position: absolute;
border: 2px solid #0070ca; border: 2px solid #4896d6;
content: ""; content: "";
width: 40px; width: 40px;
height: 40px; height: 40px;
...@@ -413,7 +406,7 @@ animation: pulsate 2s linear infinite; ...@@ -413,7 +406,7 @@ animation: pulsate 2s linear infinite;
bottom: 0; bottom: 0;
left: 0; left: 0;
margin: auto; margin: auto;
background: #0070ca; background: #4896d6;
border-radius: 50%; border-radius: 50%;
} }
#add_user_list .user_item_l { #add_user_list .user_item_l {
...@@ -435,6 +428,11 @@ animation: pulsate 2s linear infinite; ...@@ -435,6 +428,11 @@ animation: pulsate 2s linear infinite;
color: #323743; color: #323743;
} }
/**************************** add user *************************/
#addUserFormInCollaboration nav{
border:none;
}
/**************************** zoomin zoomout *************************/ /**************************** zoomin zoomout *************************/
.s_ac .img_wrap { .s_ac .img_wrap {
width: 40px; width: 40px;
...@@ -483,7 +481,15 @@ animation: pulsate 2s linear infinite; ...@@ -483,7 +481,15 @@ animation: pulsate 2s linear infinite;
#hostRequestModal .modal-footer button { #hostRequestModal .modal-footer button {
width: 50%; width: 50%;
height: 50px; height: 50px;
border-radius: 10px; border-radius: 5px;
}
#modalAddUserConfirm .chat_list h2{
font-size: 20px;
}
/**************************** document *************************/
.start_pip_img_wrap{
width: 40px;
} }
/**************************** footer *************************/ /**************************** footer *************************/
...@@ -499,7 +505,7 @@ animation: pulsate 2s linear infinite; ...@@ -499,7 +505,7 @@ animation: pulsate 2s linear infinite;
#collabo_footer .footer-wrap { #collabo_footer .footer-wrap {
margin: 0 auto; margin: 0 auto;
height: 100%; height: 100%;
max-width: 300px; max-width: 350px;
} }
#collabo_footer .footer_item a { #collabo_footer .footer_item a {
display: inline-block; display: inline-block;
...@@ -510,53 +516,57 @@ animation: pulsate 2s linear infinite; ...@@ -510,53 +516,57 @@ animation: pulsate 2s linear infinite;
border-radius: 50%; border-radius: 50%;
line-height: 45px; line-height: 45px;
} }
.end:hover {
background: #ff4747c7;
}
.close_img{
width: 20px;
height: 20px;
}
.t-icon{ .t-icon{
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: cover; background-size: contain;
width: 40px; width: 30px;
height: 40px; height: 30px;
margin: 10px; margin: 0 10px 6px 10px;
} }
.voice{ .voice{
background-image: url("../icon/icon_voice_white.png"); background-image: url("../icon/icon_voice_white.svg");
} }
.voice.disable{ .voice.disable{
background-image: url("../icon/icon_voice_white_disable.png"); background-image: url("../icon/icon_voice_white_disable.svg");
} }
.pen{ .pen{
background-image: url("../icon/icon_collabo_pen_white.png"); background-image: url("../icon/icon_collabo_pen_white.svg");
} }
.pen.disable{ .pen.disable{
background-image: url("../icon/icon_collabo_pen_white_disable.png"); background-image: url("../icon/icon_collabo_pen_white_disable.svg");
} }
.picture{ .picture{
background-image: url("../icon/icon_collabo_picture.png"); background-image: url("../icon/icon_collabo_picture.svg");
} }
.place{ .place{
background-image: url("../icon/icon_collabo_place_white.png"); background-image: url("../icon/icon_collabo_place_white.svg");
} }
.delete{ .delete{
background-image: url("../icon/icon_collabo_delete_white.png"); background-image: url("../icon/icon_collabo_delete_white.svg");
} }
.rewind{ .rewind{
background-image: url("../icon/icon_collabo_rewind_white.png"); background-image: url("../icon/icon_collabo_rewind_white.svg");
} }
.forward{ .forward{
background-image: url("../icon/icon_collabo_forward_white.png"); background-image: url("../icon/icon_collabo_forward_white.svg");
} }
.capture{ .capture{
background-image: url("../icon/icon_collabo_capture.png"); background-image: url("../icon/icon_collabo_capture.svg");
} }
.record{ .record{
background-image: url("../icon/icon_record.png"); background-image: url("../icon/icon_record.svg");
} }
.record.disable{ .record.disable{
background-image: url("../icon/icon_record_disable.png"); background-image: url("../icon/icon_record_disable.svg");
}
.tool{
background-image: url("../icon/icon_tool_white.png");
} }
.record.disable { .record.disable {
...@@ -564,8 +574,6 @@ animation: pulsate 2s linear infinite; ...@@ -564,8 +574,6 @@ animation: pulsate 2s linear infinite;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%; border-radius: 50%;
background-color: #DD4545; background-color: #DD4545;
box-shadow: 0 0 20px #dd4545; box-shadow: 0 0 20px #dd4545;
...@@ -762,9 +770,6 @@ animation: pulsate 2s linear infinite; ...@@ -762,9 +770,6 @@ animation: pulsate 2s linear infinite;
.modal-content .msg_notification { .modal-content .msg_notification {
display: none; display: none;
} }
.modal-content .tab_item:hover {
opacity: 0.75;
}
input[name="tab_item"] { input[name="tab_item"] {
display: none; display: none;
...@@ -846,6 +851,10 @@ input[name="tab_item"] { ...@@ -846,6 +851,10 @@ input[name="tab_item"] {
z-index: 999; z-index: 999;
} }
#userNameCardInCollaboration li{
list-style: none;
}
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
/* chat item */ /* chat item */
.tab_item { .tab_item {
......
...@@ -2,7 +2,8 @@ ...@@ -2,7 +2,8 @@
@import url(./notosansjp.css); @import url(./notosansjp.css);
body { body {
font-family: "Noto Sans JP", sans-serif; font-family: "Noto Sans Japanese", sans-serif;
font-weight:unset;
margin: 0 auto; margin: 0 auto;
color: #323743; color: #323743;
margin-bottom: 70px; margin-bottom: 70px;
...@@ -23,10 +24,15 @@ nav { ...@@ -23,10 +24,15 @@ nav {
position: fixed; position: fixed;
top: 0; top: 0;
width: 100%; width: 100%;
border-bottom: 1px solid #cdcdcd; border-bottom: 5px solid #4896d6;
background: #fff; background: #fff;
z-index: 3; z-index: 3;
} }
nav img{
width: 30px;
height: 30px;
padding: 2px;
}
main { main {
margin-top: 60px; margin-top: 60px;
} }
...@@ -76,7 +82,7 @@ main { ...@@ -76,7 +82,7 @@ main {
position: absolute; position: absolute;
top: 23px; top: 23px;
left: 10px; left: 10px;
background-image: url("../icon/icon_search.png"); background-image: url("../icon/icon_search.svg");
background-size: contain; background-size: contain;
width: 16px; width: 16px;
height: 16px; height: 16px;
...@@ -107,7 +113,7 @@ main { ...@@ -107,7 +113,7 @@ main {
background: #f3f3f3; background: #f3f3f3;
} }
.bg_blue { .bg_blue {
background: #0070ca; background: #4896d6;
} }
.bg_navy { .bg_navy {
background: #1d3557; background: #1d3557;
...@@ -125,7 +131,7 @@ main { ...@@ -125,7 +131,7 @@ main {
border: 1px solid #dadce0; border: 1px solid #dadce0;
} }
.text_blue { .text_blue {
color: #0070ca; color: #4896d6;
} }
.text_white { .text_white {
color: #fff; color: #fff;
...@@ -134,14 +140,21 @@ main { ...@@ -134,14 +140,21 @@ main {
/**************************** modal *************************/ /**************************** modal *************************/
/* プロフィールモーダル */ /* プロフィールモーダル */
.profile_modal .modal-footer button { .profile_modal .modal-footer button {
color: #fff; color: #707070;
border-radius: 10px; border-radius: 10px;
min-width: 90px; min-width: 90px;
font-size: 11px; font-size: 11px;
background: transparent;
outline: none;
} }
.profile_modal .modal-footer button img { .profile_modal .modal-footer button span {
width: 30px; font-weight: bold;
margin-top: 5px;
}
.profile_modal .modal-footer button img{
width: 35px;
height: 30px; height: 30px;
margin: 5px;
} }
.profile_modal .modal-body p { .profile_modal .modal-body p {
max-height: 200px; max-height: 200px;
...@@ -154,18 +167,19 @@ main { ...@@ -154,18 +167,19 @@ main {
} }
.profile_modal #userNameCard-scroll { .profile_modal #userNameCard-scroll {
height: 150px; height: 150px;
overflow: scroll; overflow: scroll;
padding-top: 0rem; padding-top: 0rem;
padding-right: 1rem; padding-right: 1rem;
margin-top: 1rem; margin-top: 1rem;
list-style: none;
} }
.disabled { .disabled {
background: darkgray !important; background: darkgray !important;
} }
.profile_modal .modal-header { display: table; } .profile_modal .modal-header { display: table; }
.profile_modal .modal-header,.profile_modal .modal-body { padding-bottom: 0; } .profile_modal .modal-body { padding-bottom: 0; }
.profile_modal .modal-footer button { width: 33%; padding: 5px; } .profile_modal .modal-footer button { width: 33%; padding: 5px; }
.profile_modal.w_50 .modal-footer button { width: 50%; padding: 5px; } .profile_modal.w_50 .modal-footer button { width: 50%; padding: 5px; }
.profile_modal .modal-header .profile_desc { width: 100%; } .profile_modal .modal-header .profile_desc { width: 100%; }
...@@ -185,7 +199,10 @@ main { ...@@ -185,7 +199,10 @@ main {
font-size: 20px; font-size: 20px;
padding: 5px; padding: 5px;
} }
.btn.focus, .btn:focus{
outline: 0;
box-shadow: none;
}
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
/* navi */ /* navi */
.nav-ttl { .nav-ttl {
......
...@@ -12,6 +12,11 @@ footer { ...@@ -12,6 +12,11 @@ footer {
#footer-main{ #footer-main{
background: #F9F9F9; background: #F9F9F9;
} }
#footer-main img {
width: 30px;
height: 30px;
padding: 2px;
}
footer .footer-wrap { footer .footer-wrap {
margin: 0 auto; margin: 0 auto;
height: 100%; height: 100%;
...@@ -42,7 +47,7 @@ footer .footer_item p { ...@@ -42,7 +47,7 @@ footer .footer_item p {
white-space: nowrap; white-space: nowrap;
} }
footer .footer_item .active { footer .footer_item .active {
color: #0070ca; color: #4896d6;
font-weight: bold; font-weight: bold;
} }
footer .footer_item a { footer .footer_item a {
......
...@@ -3,56 +3,56 @@ ...@@ -3,56 +3,56 @@
<div class="d-flex justify-content-around h-100"> <div class="d-flex justify-content-around h-100">
<div class="footer_item mx-md-3 photo_select_button collaboration_contents picture_contents"> <div class="footer_item mx-md-3 photo_select_button collaboration_contents picture_contents">
<a href="javascript:togglePhotoOpenPlaceHolder();"> <a href="javascript:togglePhotoOpenPlaceHolder();">
<div class="d-flex flex-column justify-content-center" id="photo_open_place_holder"> <div class="d-flex flex-column justify-content-center align-items-center" id="photo_open_place_holder">
<div class="t-icon picture my-0"></div> <div class="t-icon picture"></div>
<span class="text-white txt">ピクチャ</span> <span class="text-white txt">ピクチャ</span>
</div> </div>
</a> </a>
</div> </div>
<div class="footer_item mx-md-3 collaboration_contents picture_contents video_contents document_contents board_contents"> <div class="footer_item mx-md-3 collaboration_contents picture_contents video_contents document_contents board_contents">
<a href="javascript:togglePen();"> <a href="javascript:togglePen();">
<div class="d-flex flex-column justify-content-center" id="penBtn"> <div class="d-flex flex-column justify-content-center align-items-center" id="penBtn">
<div class="t-icon pen disable my-0"></div> <div class="t-icon pen disable"></div>
<span class="text-white txt">ペン</span> <span class="text-white txt">ペン</span>
</div> </div>
</a> </a>
</div> </div>
<div class="footer_item mx-md-3 collaboration_contents picture_contents video_contents document_contents board_contents"> <div class="footer_item mx-md-3 collaboration_contents picture_contents video_contents document_contents board_contents">
<a href="javascript:toggleEraser();"> <a href="javascript:toggleEraser();">
<div class="d-flex flex-column justify-content-center" id="eraserBtn"> <div class="d-flex flex-column justify-content-center align-items-center" id="eraserBtn">
<div class="t-icon delete my-0"></div> <div class="t-icon delete"></div>
<span class="text-white txt">削除</span> <span class="text-white txt">削除</span>
</div> </div>
</a> </a>
</div> </div>
<div class="footer_item mx-md-3 collaboration_contents video_contents_host"> <div class="footer_item mx-md-3 collaboration_contents video_contents_host">
<a href="javascript:toggleCapture();"> <a href="javascript:toggleCapture();">
<div class="d-flex flex-column justify-content-center" id="captureBtn"> <div class="d-flex flex-column justify-content-center align-items-center" id="captureBtn">
<div class="t-icon capture my-0"></div> <div class="t-icon capture"></div>
<span class="text-white txt">キャプチャ</span> <span class="text-white txt">キャプチャ</span>
</div> </div>
</a> </a>
</div> </div>
<div class="footer_item mx-md-3 collaboration_contents video_contents_user"> <div class="footer_item mx-md-3 collaboration_contents video_contents_user">
<a href="javascript:toggleCaptureRequest();"> <a href="javascript:toggleCaptureRequest();">
<div class="d-flex flex-column justify-content-center" id="captureRequestBtn"> <div class="d-flex flex-column justify-content-center align-items-center" id="captureRequestBtn">
<div class="t-icon capture my-0"></div> <div class="t-icon capture my-0"></div>
<span class="text-white txt">キャプチャリクエスト</span> <span class="text-white txt">キャプチャ<br>リクエスト</span>
</div> </div>
</a> </a>
</div> </div>
<div class="footer_item mx-md-3"> <div class="footer_item mx-md-3">
<a href="javascript:toggleMic();"> <a href="javascript:toggleMic();">
<div class="d-flex flex-column justify-content-center" id="micBtn"> <div class="d-flex flex-column justify-content-center align-items-center" id="micBtn">
<div class="t-icon voice my-0"></div> <div class="t-icon voice"></div>
<span class="text-white txt">マイク</span> <span class="text-white txt">マイク</span>
</div> </div>
</a> </a>
</div> </div>
<div class="footer_item mx-md-3 none host_contents"> <div class="footer_item mx-md-3 none host_contents">
<a href="javascript:toggleRecord();"> <a href="javascript:toggleRecord();">
<div class="d-flex flex-column justify-content-center" id="recordBtn"> <div class="d-flex flex-column justify-content-center align-items-center" id="recordBtn">
<div class="t-icon record my-0"></div> <div class="t-icon record"></div>
<span class="text-white txt">録音</span> <span class="text-white txt">録音</span>
<div class="flash-txt"><p>録音を開始しました</p></div> <div class="flash-txt"><p>録音を開始しました</p></div>
</div> </div>
...@@ -60,8 +60,8 @@ ...@@ -60,8 +60,8 @@
</div> </div>
<div class="footer_item mx-md-3"> <div class="footer_item mx-md-3">
<a href="javascript:CoviewBridge.exitCollaboration();"> <a href="javascript:CoviewBridge.exitCollaboration();">
<div class="img_wrap bg_red mx-1"> <div class="img_wrap bg_red mx-1 end">
<img src="icon/icon_close_white.png" alt="閉じる"> <img src="icon/icon_close_white.svg" class="close_img" alt="閉じる">
</div> </div>
</a> </a>
</div> </div>
......
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.9 33.71"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_add_member_white"><path class="cls-1" d="M12.08,5.2c-1.62,2.72-.89,7.34,2,12.67a5.83,5.83,0,0,1,.48,5.36c-1.38,3.06-5.17,3.93-9.17,4.85-2.76.64-2.58,1.23-2.58,5.63H0V32c0-3.53.28-5.58,4.46-6.54,4.73-1.1,9.4-2.07,7.15-6.21C5,7,9.72,0,16.85,0c4.67,0,8.39,3,8.39,8.66,0,5-2.74,9.6-3.35,11h-3c.55-2.15,3.51-6.13,3.51-11C22.43,1.41,14.19,1.65,12.08,5.2ZM30.9,26.69H26.69V22.47H23.88v4.22H19.66v2.8h4.22v4.22h2.81V29.49H30.9Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.35 27.65"><defs><style>.cls-1{fill:#707070;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_add_user"><path class="cls-1" d="M9.91,4.26c-1.33,2.23-.73,6,1.64,10.4a4.8,4.8,0,0,1,.39,4.4c-1.13,2.51-4.23,3.22-7.52,4-2.26.52-2.12,1-2.12,4.61H0V26.22c0-2.9.23-4.58,3.66-5.37,3.88-.9,7.71-1.7,5.87-5.09C4.07,5.7,8,0,13.83,0c3.82,0,6.87,2.44,6.87,7.11,0,4.09-2.24,7.87-2.74,9H15.52c.45-1.77,2.88-5,2.88-9C18.4,1.16,11.64,1.35,9.91,4.26ZM25.35,21.89H21.89V18.43h-2.3v3.46H16.13V24.2h3.46v3.45h2.3V24.2h3.46Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 24"><defs><style>.cls-1{fill:#4896d6;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_archive"><rect class="cls-1" width="26" height="7"/><path class="cls-1" d="M0,8V24H26V8Zm19,5H7V10H19Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 24"><defs><style>.cls-1{fill:#707070;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_archive_gray"><rect class="cls-1" width="26" height="7"/><path class="cls-1" d="M0,8V24H26V8Zm19,5H7V10H19Z"/></g></g></svg>
\ No newline at end of file
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Image / photo camera">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="2" y="4" width="28" height="24">
<g id="Icon Mask">
<path id="Round" fill-rule="evenodd" clip-rule="evenodd" d="M26.6666 6.66667H22.44L20.7866 4.86667C20.2933 4.32 19.5733 4 18.8266 4H13.1733C12.4266 4 11.7066 4.32 11.2 4.86667L9.55996 6.66667H5.33329C3.86663 6.66667 2.66663 7.86667 2.66663 9.33333V25.3333C2.66663 26.8 3.86663 28 5.33329 28H26.6666C28.1333 28 29.3333 26.8 29.3333 25.3333V9.33333C29.3333 7.86667 28.1333 6.66667 26.6666 6.66667ZM16 13.3333C13.7908 13.3333 12 15.1242 12 17.3333C12 19.5425 13.7908 21.3333 16 21.3333C18.2091 21.3333 20 19.5425 20 17.3333C20 15.1242 18.2091 13.3333 16 13.3333ZM9.33329 17.3333C9.33329 21.0133 12.32 24 16 24C19.68 24 22.6666 21.0133 22.6666 17.3333C22.6666 13.6533 19.68 10.6667 16 10.6667C12.32 10.6667 9.33329 13.6533 9.33329 17.3333Z" fill="black"/>
</g>
</mask>
<g mask="url(#mask0)">
<rect id="Color Fill" width="32" height="32" fill="#707070"/>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 16"><defs><style>.cls-1{fill:#707070;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_change_host"><path class="cls-1" d="M16,16H0v-.82c0-1.69.13-2.66,2.12-3.12,2.24-.51,4.46-1,3.39-2.94C2.36,3.3,4.61,0,8,0s5.63,3.18,2.49,9.12c-1,2,1.1,2.41,3.39,2.94S16,13.8,16,16Zm8-.62c0-1.26-.1-2-1.59-2.33-1.72-.4-3.32-.75-2.54-2.21C22.23,6.38,20.49,4,18,4a2.86,2.86,0,0,0-3,3.1c0,5.2,3,2.36,3,8.9h6Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.12 28.07"><defs><style>.cls-1{fill:#707070;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_change_room_name"><path class="cls-1" d="M9.1,25.3l.1-.1L19.89,14.5l.11-.11.11-.11,5.67-5.67h0L19.46,2.29h0L13.78,8l-.11.11-.11.11L2.77,19h0L0,28.06H0l9-2.73ZM2,26,3.4,21.5h0l3.16,3.16h0L2,26.05Z"/><path class="cls-1" d="M27.59,5.71a1.82,1.82,0,0,0,0-2.56L25,.53a1.8,1.8,0,0,0-2.56,0L21.1,1.84h0L26.28,7h0Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.43 24.23"><defs><style>.cls-1{fill:#4896d6;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_chat"><path class="cls-1" d="M13.22,0C6.24,0,0,4.65,0,11a9.72,9.72,0,0,0,2.25,6.2c.07,2-1.12,4.91-2.19,7,2.87-.52,6.94-1.66,8.79-2.79C19,23.91,26.43,17.69,26.43,11,26.43,4.62,20.16,0,13.22,0ZM7.71,12.67A1.66,1.66,0,1,1,9.36,11,1.65,1.65,0,0,1,7.71,12.67Zm5.51,0A1.66,1.66,0,1,1,14.87,11,1.65,1.65,0,0,1,13.22,12.67Zm5.5,0A1.66,1.66,0,1,1,20.38,11,1.65,1.65,0,0,1,18.72,12.67Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.43 24.23"><defs><style>.cls-1{fill:#707070;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_chat_gray"><path class="cls-1" d="M13.22,0C6.24,0,0,4.65,0,11a9.72,9.72,0,0,0,2.25,6.2c.07,2-1.12,4.91-2.19,7,2.87-.52,6.94-1.66,8.79-2.79C19,23.91,26.43,17.69,26.43,11,26.43,4.62,20.16,0,13.22,0ZM7.71,12.67A1.66,1.66,0,1,1,9.36,11,1.65,1.65,0,0,1,7.71,12.67Zm5.51,0A1.66,1.66,0,1,1,14.87,11,1.65,1.65,0,0,1,13.22,12.67Zm5.5,0A1.66,1.66,0,1,1,20.38,11,1.65,1.65,0,0,1,18.72,12.67Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.79 17.79"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_close_white"><polygon class="cls-1" points="17.79 1.83 15.97 0 8.9 7.07 1.83 0 0 1.83 7.07 8.9 0 15.97 1.83 17.79 8.9 10.72 15.97 17.79 17.79 15.97 10.72 8.9 17.79 1.83"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.4 22"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_collabo_capture"><path class="cls-1" d="M5.5,2.2H2.2V1.1H5.5Zm12,0,.9,1.34a4.36,4.36,0,0,0,3.66,2H24.2V19.8H2.2V5.5H6.52a4.36,4.36,0,0,0,3.66-2l.9-1.34ZM18.7,0H9.9L8.35,2.32a2.19,2.19,0,0,1-1.83,1H0V22H26.4V3.3H22.08a2.19,2.19,0,0,1-1.83-1ZM6.6,8.8A1.1,1.1,0,1,0,5.5,9.9,1.1,1.1,0,0,0,6.6,8.8Zm7.7,0A3.3,3.3,0,1,1,11,12.1,3.3,3.3,0,0,1,14.3,8.8Zm0-2.2a5.5,5.5,0,1,0,5.5,5.5A5.5,5.5,0,0,0,14.3,6.6Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.77 30.55"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_collabo_delete_white"><rect class="cls-1" y="27.55" width="27" height="3"/><path class="cls-1" d="M11.86,2H24.3a1.78,1.78,0,0,1,1.78,1.78v17a.2.2,0,0,1-.2.2H10.28a.2.2,0,0,1-.2-.2v-17A1.78,1.78,0,0,1,11.86,2Z" transform="translate(15.39 -9.76) rotate(50.33)"/><path class="cls-1" d="M-.7,16.93h16a0,0,0,0,1,0,0v4.91a2.09,2.09,0,0,1-2.09,2.09H1.4A2.09,2.09,0,0,1-.7,21.84V16.93a0,0,0,0,1,0,0Z" transform="translate(18.37 1.77) rotate(50.33)"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.26 31.72"><defs><style>.cls-1{fill:#fff;stroke:#fff;stroke-miterlimit:10;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_collabo_document"><path class="cls-1" d="M.5,3.29V28.42a2.8,2.8,0,0,0,2.79,2.8H22a2.8,2.8,0,0,0,2.79-2.8V10.64a3,3,0,0,0-.9-2.17L16.79,1.4A3,3,0,0,0,14.62.5H3.29A2.79,2.79,0,0,0,.5,3.29ZM22.84,9.66H16.56c-.68,0-.95-.26-.95-.94V2.44ZM2.07,3.29A1.22,1.22,0,0,1,3.29,2.07H14.22V9.56a1.5,1.5,0,0,0,1.5,1.5h7.47V28.42A1.23,1.23,0,0,1,22,29.65H3.29a1.23,1.23,0,0,1-1.22-1.23Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.16 27.98"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_collabo_headset"><path class="cls-1" d="M24.88,13.22C24.88,5.92,19.31,0,12.44,0S0,5.92,0,13.22A13.88,13.88,0,0,0,.52,17a1.31,1.31,0,0,0,0,.52l1.21,5.56a1.34,1.34,0,0,0,1.59,1l1.6-.35,1-.22A1.34,1.34,0,0,0,7,22l-.19-.87-1-4.69a1.34,1.34,0,0,0-1.59-1l-.78.17a10.38,10.38,0,0,1-.26-2.32c0-5.47,4.19-9.92,9.33-9.92s9.33,4.45,9.33,9.92a10.38,10.38,0,0,1-.26,2.32h0l-.78-.17a1.34,1.34,0,0,0-1.59,1l-1,4.69-.19.87a1.33,1.33,0,0,0,1,1.59l1,.22,1.61.35a1.33,1.33,0,0,0,1.58-1l1.21-5.56a1.32,1.32,0,0,0,0-.52A14.27,14.27,0,0,0,24.88,13.22Z"/><rect class="cls-1" x="22.1" y="18.66" width="2.33" height="9.25" rx="1.09" transform="translate(5.31 -4.3) rotate(11.92)"/><rect class="cls-1" x="19.05" y="23.31" width="1.75" height="7.58" rx="0.82" transform="translate(47.03 7.18) rotate(90)"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.05 27"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_collabo_pen_white"><path class="cls-1" d="M8.75,24.34l.1-.1L19.14,14l.1-.11.11-.1L24.8,8.29h0L18.72,2.2h0L13.26,7.65l-.1.11-.11.1L2.66,18.25h0L0,27H0l8.62-2.62Zm-6.81.72,1.33-4.37h0l3,3h0L1.94,25.06Z"/><path class="cls-1" d="M26.54,5.49a1.74,1.74,0,0,0,0-2.46L24,.51a1.74,1.74,0,0,0-2.46,0L20.3,1.77h0l5,5h0Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.05 27"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_collabo_pen_white_disable"><path class="cls-1" d="M26.54,5.49a1.74,1.74,0,0,0,0-2.46L24,.51a1.74,1.74,0,0,0-2.46,0L20.3,1.77h0l5,5h0Z"/><path class="cls-1" d="M19.19,13.89l0-.05.11-.1L24.8,8.29h0L18.72,2.2h0L13.26,7.65l-.1.11-.11.1-.27.28Z"/><path class="cls-1" d="M8,12.9,2.66,18.25h0L0,27H0l8.62-2.62.13,0,.1-.1,5.58-5.59ZM6.31,23.73,1.94,25.06h0l1.33-4.37h0l3,3Z"/><rect class="cls-1" x="-0.96" y="11.45" width="28.96" height="4.1" rx="1.61" transform="translate(12.47 -5.58) rotate(41.9)"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.09 22.85"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_collabo_picture"><path class="cls-1" d="M0,0V22.85H28.09V0ZM2.79,20.06V2.79H25.3V20.06Z"/><path class="cls-1" d="M11.16,9.18A1.95,1.95,0,1,0,9.21,7.24,2,2,0,0,0,11.16,9.18Z"/><path class="cls-1" d="M16,8.48A1.18,1.18,0,0,0,15,9l-2.28,3.49a1,1,0,0,1-1.69,0,1.18,1.18,0,0,0-2,0l-3.85,6h18L17,9A1.18,1.18,0,0,0,16,8.48Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 24"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_collabo_place_white"><path class="cls-1" d="M8,2a6,6,0,0,1,6,5.6c0,3.09-2.49,7.13-6,12.66C4.49,14.73,2,10.7,2,7.6A6,6,0,0,1,8,2M8,0C3.8,0,0,3.4,0,7.6S3.47,16.81,8,24c4.53-7.19,8-12.2,8-16.4S12.2,0,8,0ZM8,11a3,3,0,1,1,3-3A3,3,0,0,1,8,11Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.45 16.64"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:3px;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_collabo_videocam"><rect class="cls-1" x="1.5" y="1.5" width="19.22" height="13.64" rx="1.15"/><polygon class="cls-1" points="30.95 12.97 24.44 11.11 24.44 5.53 30.95 3.67 30.95 12.97"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62.41 44.19"><defs><style>.cls-1,.cls-2{fill:#fff;}.cls-2{stroke:#fff;stroke-miterlimit:10;stroke-width:0.5px;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="whiteboad_icon_white"><path class="cls-1" d="M39.19,5V32.56H5V5H39.19m3-5H2A2,2,0,0,0,0,2V35.56a2,2,0,0,0,2,2H42.19a2,2,0,0,0,2-2V2a2,2,0,0,0-2-2Z"/><path class="cls-1" d="M62.41,44.19H44.54V25.74a3,3,0,0,1,3-3H59.41a3,3,0,0,1,3,3Z"/><circle class="cls-1" cx="53.48" cy="14.4" r="5.96"/><path class="cls-1" d="M49.93,30.49l-5.37,3.64a4.14,4.14,0,0,1-5-.41h0a2.49,2.49,0,0,1,.37-4l5.36-3.64a4.14,4.14,0,0,1,5,.41h0A2.49,2.49,0,0,1,49.93,30.49Z"/><path class="cls-1" d="M37.9,34.26l-5.1-4.42a2.66,2.66,0,0,1-.06-4.23h0a4.08,4.08,0,0,1,5,.19l5.1,4.43a2.67,2.67,0,0,1,.06,4.23h0A4.08,4.08,0,0,1,37.9,34.26Z"/><rect class="cls-2" x="17.93" y="17.93" width="15.47" height="2.21" rx="0.5" transform="translate(19.52 -12.32) rotate(42.35)"/></g></g></svg>
\ No newline at end of file
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="3" y="3" width="18" height="18">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9707 14.4716H15.1807L14.9007 14.2016C16.1007 12.8016 16.7207 10.8916 16.3807 8.86157C15.9107 6.08157 13.5907 3.86157 10.7907 3.52157C6.56072 3.00157 3.01072 6.56157 3.52072 10.7916C3.86072 13.5916 6.08072 15.9116 8.86072 16.3816C10.8907 16.7216 12.8007 16.1016 14.2007 14.9016L14.4707 15.1816V15.9716L18.7307 20.2216C19.1407 20.6316 19.8007 20.6316 20.2107 20.2216L20.2207 20.2116C20.6307 19.8016 20.6307 19.1416 20.2207 18.7316L15.9707 14.4716ZM9.97072 14.4716C7.48072 14.4716 5.47072 12.4616 5.47072 9.97157C5.47072 7.48157 7.48072 5.47157 9.97072 5.47157C12.4607 5.47157 14.4707 7.48157 14.4707 9.97157C14.4707 12.4616 12.4607 14.4716 9.97072 14.4716ZM9.47072 7.97157C9.47072 7.69157 9.69072 7.47157 9.97072 7.47157C10.2507 7.47157 10.4707 7.69157 10.4707 7.97157V9.47157H11.9707C12.2507 9.47157 12.4707 9.69157 12.4707 9.97157C12.4707 10.2516 12.2507 10.4716 11.9707 10.4716H10.4707V11.9716C10.4707 12.2516 10.2507 12.4716 9.97072 12.4716C9.69072 12.4716 9.47072 12.2516 9.47072 11.9716V10.4716H7.97072C7.69072 10.4716 7.47072 10.2516 7.47072 9.97157C7.47072 9.69157 7.69072 9.47157 7.97072 9.47157H9.47072V7.97157Z" fill="black"/>
</mask>
<g mask="url(#mask0)">
<rect width="24" height="24" fill="#858C94"/>
</g>
</svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="3" y="3" width="18" height="18">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9716 14.4716H15.1816L14.9016 14.2016C16.1016 12.8016 16.7216 10.8916 16.3816 8.86157C15.9116 6.08157 13.5916 3.86157 10.7916 3.52157C6.56157 3.00157 3.00157 6.56157 3.52157 10.7916C3.86157 13.5916 6.08157 15.9116 8.86157 16.3816C10.8916 16.7216 12.8016 16.1016 14.2016 14.9016L14.4716 15.1816V15.9716L18.7316 20.2216C19.1416 20.6316 19.8016 20.6316 20.2116 20.2216L20.2216 20.2116C20.6316 19.8016 20.6316 19.1416 20.2216 18.7316L15.9716 14.4716ZM9.97157 14.4716C7.48157 14.4716 5.47157 12.4616 5.47157 9.97157C5.47157 7.48157 7.48157 5.47157 9.97157 5.47157C12.4616 5.47157 14.4716 7.48157 14.4716 9.97157C14.4716 12.4616 12.4616 14.4716 9.97157 14.4716ZM12.4716 9.97157C12.4716 9.69157 12.2516 9.47157 11.9716 9.47157H7.97157C7.69157 9.47157 7.47157 9.69157 7.47157 9.97157C7.47157 10.2516 7.69157 10.4716 7.97157 10.4716H11.9716C12.2516 10.4716 12.4716 10.2516 12.4716 9.97157Z" fill="black"/>
</mask>
<g mask="url(#mask0)">
<rect width="24" height="24" fill="#858C94"/>
</g>
</svg>
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="4" y="4" width="26" height="26">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.48532 17.9605L8.48532 20.0111C8.48532 20.4495 7.94792 20.6758 7.62972 20.3576L4.59623 17.3241C4.39824 17.1261 4.39824 16.815 4.59623 16.617L7.62972 13.5835C7.94792 13.2653 8.48532 13.4916 8.48532 13.93L8.48532 15.9806L11.5542 15.9665C12.1057 15.9665 12.5583 16.419 12.5583 16.9706C12.5583 17.5221 12.1057 17.9747 11.5542 17.9747L8.48532 17.9605ZM15.9806 8.4853L13.93 8.4853C13.4916 8.4853 13.2654 7.9479 13.5836 7.6297L16.617 4.59621C16.815 4.39822 17.1262 4.39822 17.3242 4.59621L20.3576 7.6297C20.6758 7.9479 20.4496 8.4853 20.0112 8.4853L17.9605 8.4853L17.9747 11.5541C17.9747 12.1057 17.5221 12.5582 16.9706 12.5582C16.4191 12.5582 15.9665 12.1057 15.9665 11.5541L15.9806 8.4853ZM20.0112 25.4559L17.9605 25.4559L17.9747 22.387C17.9747 21.8355 17.5221 21.3829 16.9706 21.3829C16.4191 21.3829 15.9665 21.8355 15.9665 22.387L15.9806 25.4559L13.93 25.4559C13.4916 25.4559 13.2654 25.9933 13.5836 26.3115L16.617 29.3449C16.815 29.5429 17.1262 29.5429 17.3242 29.3449L20.3576 26.3115C20.6758 25.9933 20.4496 25.4559 20.0112 25.4559ZM25.4559 15.9806L25.4559 13.93C25.4559 13.4916 25.9933 13.2653 26.3115 13.5835L29.345 16.617C29.543 16.815 29.543 17.1261 29.345 17.3241L26.3115 20.3576C25.9933 20.6758 25.4559 20.4495 25.4559 20.0111L25.4559 17.9605L22.387 17.9747C21.8355 17.9747 21.3829 17.5221 21.3829 16.9706C21.3829 16.419 21.8355 15.9665 22.387 15.9665L25.4559 15.9806Z" fill="black"/>
</mask>
<g mask="url(#mask0)">
<rect y="16.9706" width="24" height="24" transform="rotate(-45 0 16.9706)" fill="#858C94"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24.61 24.61"><defs><style>.cls-1{fill:#4896d6;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_contact"><circle class="cls-1" cx="12.3" cy="5.91" r="5.91"/><path class="cls-1" d="M7.05,13.78h10.5a7.05,7.05,0,0,1,7.05,7.05V21A3.62,3.62,0,0,1,21,24.61H3.62A3.62,3.62,0,0,1,0,21v-.15A7.05,7.05,0,0,1,7.05,13.78Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24.61 24.61"><defs><style>.cls-1{fill:#707070;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_contact_gray"><circle class="cls-1" cx="12.3" cy="5.91" r="5.91"/><path class="cls-1" d="M7.05,13.78h10.5a7.05,7.05,0,0,1,7.05,7.05V21A3.62,3.62,0,0,1,21,24.61H3.62A3.62,3.62,0,0,1,0,21v-.15A7.05,7.05,0,0,1,7.05,13.78Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 18.45"><defs><style>.cls-1{fill:#707070;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_display_off_chatroom"><path class="cls-1" d="M19.6,0,16.26,3.14A13.17,13.17,0,0,0,12,2.44C4.45,2.44,0,9,0,9a20.75,20.75,0,0,0,5.15,5.14L2.23,17l1.42,1.41L21,1.42Zm-6,5.78A4,4,0,0,0,8.32,11L6.6,12.69A17.93,17.93,0,0,1,2.54,9C4,7.38,7.35,4.44,12,4.44a11.36,11.36,0,0,1,2.6.31Zm-2.88,7.43,5.09-5A4,4,0,0,1,10.71,13.21ZM24,9s-4.25,7.45-12,7.45a10.86,10.86,0,0,1-3.86-.74l1.62-1.58a8.66,8.66,0,0,0,2.24.32c4.79,0,8.1-3.53,9.5-5.37a15.38,15.38,0,0,0-3.59-2.95l1.49-1.46A16.65,16.65,0,0,1,24,9Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.14 41"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:3px;}.cls-2{fill:#fff;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_end_pip"><rect class="cls-1" x="26.07" y="23" width="25.57" height="16.5" rx="5.77"/><path class="cls-1" d="M50.58,19.2V9.9a8.48,8.48,0,0,0-8.51-8.4H10A8.48,8.48,0,0,0,1.5,9.9V31.1A8.48,8.48,0,0,0,10,39.5H22.08"/><rect class="cls-2" x="10.09" y="14.59" width="13.5" height="2.5" transform="translate(17.55 38.96) rotate(-135)"/><polyline class="cls-2" points="8.09 15.59 8.09 6.59 17.09 6.59"/></g></g></svg>
\ No newline at end of file
<svg width="45" height="32" viewBox="0 0 45 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M44.2339 13.8343C43.5133 12.8193 42.3788 12.1926 41.1482 12.1025V8.18508C41.1488 7.10104 40.7042 6.10532 39.9933 5.39684C39.2842 4.68598 38.2891 4.24195 37.2051 4.24248H19.3506C19.1313 4.24248 18.9185 4.1589 18.7569 4.00685L18.7581 4.00869L15.6208 1.06664C14.8895 0.381622 13.9257 6.37514e-07 12.924 6.37514e-07H7.79572C6.71168 -0.000614597 5.71597 0.444112 5.00748 1.15497C4.29662 1.86337 3.85198 2.85917 3.8526 3.94321V12.1025C2.62195 12.1926 1.48737 12.8193 0.766846 13.8349C0.262002 14.5464 0 15.3889 0 16.2391C0 16.7 0.0769043 17.1646 0.233789 17.6116L3.93838 28.2045C3.96009 28.2652 3.98224 28.3187 4.01054 28.3765C4.18061 28.7207 4.33925 29.059 4.51767 29.3968C4.78749 29.8973 5.09634 30.4321 5.65523 30.9032C5.93279 31.1346 6.27354 31.3328 6.64427 31.4584C7.01561 31.5853 7.40681 31.6405 7.79563 31.64H37.205C37.8468 31.6435 38.4513 31.4333 38.9056 31.1382C39.5954 30.6911 40.0034 30.1214 40.3146 29.6263C40.6205 29.1299 40.8327 28.6678 40.9661 28.4232C41.0088 28.3427 41.0317 28.2904 41.0616 28.2045L44.7668 17.611C44.9231 17.1645 45 16.7 45 16.2391C45 15.3889 44.7386 14.5464 44.2339 13.8343ZM38.0714 12.0844H6.92912V3.9433C6.92974 3.69932 7.02352 3.4926 7.18269 3.33035C7.34493 3.17109 7.55165 3.0774 7.79563 3.07679H12.9239C13.1444 3.07679 13.3552 3.16037 13.517 3.31119L16.6538 6.25272L16.6549 6.25447C17.3844 6.93651 18.3477 7.31927 19.3506 7.31927H37.205C37.449 7.3198 37.6562 7.41366 37.8179 7.57283C37.9772 7.73446 38.071 7.94118 38.0715 8.18517V12.0844H38.0714Z" fill="#707070"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.71 19.76"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_host_tag"><path class="cls-1" d="M3,16.8l1,3H19.76l1-3Zm13.85-2H14.4c3.46-4.56,3.33-8.44,1-8.8a2.11,2.11,0,0,0-2.57,2.2v6.6h-2V8.22A2.11,2.11,0,0,0,8.31,6c-2.32.36-2.46,4.24,1,8.8H6.9c-2.87-4.39-2.65-8-1-9.7A3.85,3.85,0,0,1,8.67,4a4.12,4.12,0,0,1,2.2.67,1.75,1.75,0,0,0-.47-1.31,2,2,0,1,1,2.91,0,1.76,1.76,0,0,0-.47,1.31A4.15,4.15,0,0,1,15.05,4a3.88,3.88,0,0,1,2.78,1.17C19.47,6.84,19.69,10.43,16.81,14.82Zm-12,0H2.12A9.1,9.1,0,0,1,0,9.39,4.81,4.81,0,0,1,.82,6.61,4,4,0,0,1,4.72,5a5.45,5.45,0,0,0-.83,1.93,1.9,1.9,0,0,0-1.45.8C1.45,9.16,2,12.07,4.76,14.82Zm19-5.43a9.1,9.1,0,0,1-2.12,5.43H19c2.8-2.75,3.31-5.66,2.32-7.09a1.88,1.88,0,0,0-1.45-.8A5.45,5.45,0,0,0,19,5,4,4,0,0,1,22.9,6.61,4.88,4.88,0,0,1,23.71,9.39Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.46 23.46"><defs><style>.cls-1{fill:#4896d6;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_join_room"><polygon class="cls-1" points="8.86 7.95 12.64 11.73 8.86 15.51 10.72 17.37 16.36 11.73 10.72 6.09 8.86 7.95"/><path class="cls-1" d="M11.73,0A11.73,11.73,0,1,0,23.46,11.73,11.73,11.73,0,0,0,11.73,0Zm7,18.72a9.9,9.9,0,1,1,2.89-7A9.85,9.85,0,0,1,18.72,18.72Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.39 24.19"><defs><style>.cls-1{fill:#707070;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_make_room"><path class="cls-1" d="M26.39,17.64H22.64V13.89h-1.5v3.75H17.39v1.5h3.75v3.75h1.5V19.14h3.75Z"/><path class="cls-1" d="M16.48,19.35a13.29,13.29,0,0,1-3.19.41,18.78,18.78,0,0,1-4.83-.71,14.89,14.89,0,0,1-4.69,2,10.44,10.44,0,0,0,.66-4.69A7.75,7.75,0,0,1,2.2,11c0-4.85,4.93-8.8,11-8.8s11,4,11,8.8a7.21,7.21,0,0,1-.36,2.25,5.28,5.28,0,0,1,1.88,1.19A9.29,9.29,0,0,0,26.39,11c0-6.39-6.27-11-13.19-11S0,4.65,0,11a9.69,9.69,0,0,0,2.25,6.19c.06,2-1.12,4.9-2.19,7C2.92,23.67,7,22.53,8.83,21.4A18.86,18.86,0,0,0,13.3,22a15.69,15.69,0,0,0,4-.52A5.48,5.48,0,0,1,16.48,19.35Z"/><path class="cls-1" d="M18.69,9.35A1.65,1.65,0,1,0,20.34,11,1.65,1.65,0,0,0,18.69,9.35Z"/><path class="cls-1" d="M6.05,11A1.65,1.65,0,1,0,7.7,9.35,1.65,1.65,0,0,0,6.05,11Z"/><path class="cls-1" d="M11.55,11A1.65,1.65,0,1,0,13.2,9.35,1.65,1.65,0,0,0,11.55,11Z"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46.34 30.89"><defs><style>.cls-1{fill:#29abe2;}</style></defs><g id="レイヤー_2" data-name="レイヤー 2"><g id="icon_member_blue"><path class="cls-1" d="M30.89,30.89H28.32c0-4,.15-4.57-2.27-5.13-3.7-.85-7.2-1.66-8.47-4.45A5.35,5.35,0,0,1,18,16.4c2.63-5,3.29-9.22,1.81-11.68-1.73-2.87-7-2.89-8.71,0-1.49,2.5-.82,6.73,1.83,11.62a5.33,5.33,0,0,1,.44,4.91c-1.27,2.8-4.73,3.6-8.4,4.45-2.53.58-2.37,1.12-2.37,5.15H0v-1.6c0-3.24.26-5.11,4.09-6,4.33-1,8.61-1.89,6.55-5.68C4.55,6.37,8.9,0,15.44,0s10.88,6.13,4.81,17.6c-2,3.77,2.12,4.67,6.55,5.69S30.89,26.65,30.89,30.89ZM46.34,29.7c0-2.44-.19-3.84-3.07-4.51-3.32-.76-6.41-1.44-4.91-4.26,4.55-8.61,1.21-13.21-3.61-13.21-3.25,0-5.79,2.11-5.79,6,0,3.26,1.48,5.6,2.33,7.53H34c-.44-1.93-3.78-6.6-2-9.62,1.06-1.78,4.39-1.78,5.44,0s.46,4.67-1.37,8.14A4.63,4.63,0,0,0,35.77,24c.79,1.72,2.52,2.54,4.48,3.11,3.88,1.14,3.52.11,3.52,3.81h2.56Z"/></g></g></svg>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment